解决跨域问题：Access to XMLHttpRequest at ‘http://localhost:8080/xxx‘ No ‘Access-Control-Allow-Origin‘ head

---

一、问题

当我实现前后端分离的时候，遇到了这个问题：
Access to XMLHttpRequest at ‘http://localhost:8080/xxx’ from origin ‘http://localhost:63342’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

二、问题产生的原因

后端响应没有带上“ access-control-allow-origin”和“ access-control-allow-methods”标头。

三、解决方法

1. 问题出现在我们没有带标头，我们就带上标头

response.addHeader(  "Access-Control-Allow-Origin"，"*");//允许所有来源访同
response.addHeader(  "Access-Control-Allow-Method","POST,GET");//允许访问的方式

这样就解决了，但每次响应都要带上这两个标头，觉得麻烦可以用下面这个方法。

2. 使用插件扩展

Edge浏览器可直接在获取扩展里面搜索CORS，下载搜索到的第一个插件就行，当我们需要跨域时就可以打开。

Google浏览器也可以安装插件来解决，我用的是Moesif Origin & CORS Changer

3. 编写配置文件

最佳解决方式！

@Configuration
public class CORSConfig implements WebMvcConfigurer {

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