解决前后端分离项目的跨域请求问题

  • Post author:
  • Post category:其他




1. 跨域请求



1.1 什么是跨域

浏览器出于安全的考虑,使用 XMLHttpRequest对象发起 HTTP请求时必须遵守同源策略,否则就是跨域的HTTP请求,默认情况下是被禁止的。 同源策略要求源相同才能正常进行通信,即协议、域名、端口号都完全一致。



1.2 CORS解决跨域

​CORS是一个W3C标准,全称是”跨域资源共享”(Cross-origin resource sharing),允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。

​它通过服务器增加一个特殊的Header[Access-Control-Allow-Origin]来告诉客户端跨域的限制,如果浏览器支持CORS、并且判断Origin通过的话,就会允许XMLHttpRequest发起跨域请求。



1.3 SpringBoot使用CORS解决跨域



使用@CrossOrigin

可以在支持跨域的方法上或者是Controller上加上@CrossOrigin注解

@RestController
@RequestMapping("/user")
@CrossOrigin
public class UserController {

    @Autowired
    private UserServcie userServcie;

    @RequestMapping("/findAll")
    public ResponseResult findAll(){
        //调用service查询数据 ,进行返回
        List<User> users = userServcie.findAll();

        return new ResponseResult(200,users);
    }
}


使用 WebMvcConfigurer 的 addCorsMappings 方法配置CorsInterceptor

@Configuration
public class CorsConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
      // 设置允许跨域的路径
        registry.addMapping("/**")
                // 设置允许跨域请求的域名
                .allowedOriginPatterns("*")
                // 是否允许cookie
                .allowCredentials(true)
                // 设置允许的请求方式
                .allowedMethods("GET", "POST", "DELETE", "PUT")
                // 设置允许的header属性
                .allowedHeaders("*")
                // 跨域允许时间
                .maxAge(3600);
    }
}



版权声明:本文为qq_41627017原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。