文章目录
- 一、问题
- 二、问题产生的原因
- 三、解决方法
- 1. 问题出现在我们没有带标头,我们就带上标头
- 2. 使用插件扩展
- 3. 编写配置文件
一、问题
当我实现前后端分离的时候,遇到了这个问题:
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);
}
}
更多推荐
解决跨域问题:Access to XMLHttpRequest at ‘http://localhost:8080/xxx‘ No ‘Access-Contro
发布评论