跨域请求被拦截问题——has been blocked by CORS policy: No ‘Access-Control-Allow-Origin‘ header is present on...

在开发前后端分离的项目时，必须解决的一个问题就是跨域请求问题。

1 什么是跨域请求

跨域请求就是指：当前发起请求的域与该请求指向的资源所在的域不同时的请求。即“协议 + 域名 + 端口号” 有不相同，那么就是跨域。

例如，如下在开发中遇到的跨域请求被拦截问题。

前端的端口是8080，而后端的端口是8000，前端请求后端的时后端会检查request的origin，发现是8080，跟自己的8000不一致，就会有跨域拦截。

跨域请求问题可以在前端解决，也可以在后端解决。

1）前端的解决方法——使用正向代理，隐藏请求者真实地址。

使用正向代理时，后端发现请求方端口是8000（其实是代理的端口），认为是同源的就会放行。

vue项目的配置正向代理的做法是在.env.development和vue.config.js中添加以下配置。

2）后端解决方法

后端的做法很简单就是对跨域请求进行放行。

spring项目解决跨域请求问题的做法如下：

​ 创建一个适配器ConfigurerAdapter实现WebMvcConfigurer接口的addCorsMappings方法，对所有跨域请求进行放行。

@Configuration
public class ConfigurerAdapter implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowCredentials(false)
                .allowedMethods("POST","GET","DELETE","PUT","OPTIONS")
                .allowedOrigins("*")
        ;
    }
}

addCorsMappings()方法是设置跨域问题的，几乎是每个后台服务器都需要配置的东西。

还有另外一种解决方法，就是直接在对应Controller上添加@CrossOrigin注解，简单粗暴。