0
点赞
收藏
分享

微信扫一扫

前后端分离开发出现的跨域问题

青鸾惊鸿 2023-11-29 阅读 63
java

 比如:

当前页面的URL请求的URL是否跨域原因
htttp://localhost:8080htttps://localhost:8080协议不同
htttp://localhostll:8080htttp://localhost:8080域名不同
htttp://localhost:8080htttp://localhost:8081端口号不同

那么,为什么会出现跨域问题?

这里我的前端跑在8081端口下,后端跑在8080端口上 ,虽然协议和域名都相同,但是端口号不同,这种情况就是跨域问题了,所以前端页面向后端发送请求就报错了。

这里有三种解决方案,且都是后端的解决方案:

报错信息截图:

SpringBoot项目中解决跨域的3中方案:

第一种: 在目标方法上添加@CrossOrigin注解

 

 

 

添加注解后,重新启动项目,前端发送请求,后端接收到请求后并成功响应了请求。

 

 第二种:开启跨域资源共享

添加一个配置类就ok了。

@Configuration
public class CorsConfig {

    @Bean
    public CorsFilter corsFilter(){
        CorsConfiguration configuration = new CorsConfiguration();
        //设置允许的域名
        configuration.addAllowedOrigin("*");
        //设置原始头信息
        configuration.addAllowedHeader("*");
        //设置允许所有的请求方法跨域调用
        configuration.addAllowedMethod("*");
        //创建source对象
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        //添加映射路径
        source.registerCorsConfiguration("/**",configuration);
        return new CorsFilter(source);
    }
}

 

第三种: 实现WebMvcConfigurer接口,重写addCorsMappings方法

@Configuration
public class CorsConfiguration implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOriginPatterns("*")
                .allowedMethods("GET","DELETE","PUT","POST","HEAD","OPTIONS")
                .allowCredentials(true)
                .allowedHeaders("*");
    }
}

 

 

 

 

 

 

举报

相关推荐

0 条评论