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

完整错误如下

has been blocked by CORS policy: Response to preflight request doesnt 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() {}
}

还是不管用。后面尝试这种方法，才生效：

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);
    }

}