解决跨域问题：Access to XMLHttpRequest at ‘http:localhost:8080xxx‘ No ‘Access

admin管理员组

文章数量:1794759

解决跨域问题：Access to XMLHttpRequest at ‘http://localhost:8080/xxx‘ No ‘Access

文章目录

• 一、问题
• 二、问题产生的原因
• 三、解决方法
• • 1. 问题出现在我们没有带标头，我们就带上标头
  • 2. 使用插件扩展
  • 3. 编写配置文件

---

一、问题

当我实现前后端分离的时候，遇到了这个问题： Access to XMLhttpRequest at ‘localhost:8080/xxx’ from Origin ‘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); } }

本文标签： HTTPXMLHttpRequestAccessxxxlocalhost