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

这篇具有很好参考价值的文章主要介绍了解决跨域问题：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，下载搜索到的第一个插件就行，当我们需要跨域时就可以打开。
解决跨域问题：Access to XMLHttpRequest at ‘http://localhost:8080/xxx‘ No ‘Access-Control-Allow-Origin‘ head
Google浏览器也可以安装插件来解决，我用的是Moesif Origin & CORS Changer

3. 编写配置文件

最佳解决方式！文章来源地址https://www.toymoban.com/news/detail-509049.html

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

到了这里，关于解决跨域问题：Access to XMLHttpRequest at ‘http://localhost:8080/xxx‘ No ‘Access-Control-Allow-Origin‘ head的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！