has been blocked by CORS policy: Response异常问题的解决

项目做前后端分离后，第一次遇到这种问题，在这里记录解决的过程。因为采用前后端分离开发，前端和和后台使用的端口号不一致。顺便说下跨域问题的来源：1、访问协议不同，如http和https之间2、访问地址不同3、端口号不同...

moxiaoran5753

14280人浏览 · 2022-06-07 14:19:47

moxiaoran5753 · 2022-06-07 14:19:47 发布

完整错误如下

has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

这个问题通过字面意思，可以看出来是跨域问题，然后去检查前后端代码，是不是跨域没有设置好，比如我这次后端的没有弄好，所以就报这种错误。

试了很多种方法，包括在controller层加上允许跨域的注解

@CrossOrigin

不生效，后面试了这种方法：

@Component
public class SimpleCORSFilter implements Filter {

    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE, HEAD,PUT");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "access-control-allow-origin, authority, content-type, version-info, X-Requested-With");
        response.setHeader("Access-Control-Allow-Headers","token");

        chain.doFilter(req, res);
    }

    @Override
    public void init(FilterConfig filterConfig) {}

    @Override
    public void destroy() {}
}

还是不管用。后面尝试这种方法has been blocked by CORS policy: Response 解决 - 知乎，才生效：

1、如果是vue的话，就可以如下方式：

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api':{
        target:'http://localhost:8443', //后期可以改
        changeOrigin:true,
        pathRewrite:{
          '^/api': ''
        }
      }
    }, //配置跨域支持

2、springboot的话，如果没有config层的话，建议做一个，然后在里面编写一个java文件，参考如下，实现全局跨域.

@SpringBootConfiguration
public class MyWebConfigurer implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry corsRegistry){
        /**
         * 所有请求都允许跨域，使用这种配置就不需要
         * 在interceptor中配置header了
         */
        corsRegistry.addMapping("/**")
                .allowCredentials(true)
                .allowedOrigins("http://localhost:9528") //换成前端中的地址
                .allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE")
                .allowedHeaders("*")
                .maxAge(3600);
    }

}