跨域请求被拦截问题——has been blocked by CORS policy: No ‘Access-Control-Allow-Origin‘ header is present on...
在开发前后端分离的项目时,必须解决的一个问题就是跨域请求问题。1 什么是跨域请求跨域请求就是指:当前发起请求的域与该请求指向的资源所在的域不同时的请求。即“协议 + 域名 + 端口号” 有不相同,那么就是跨域。例如,如下在开发中遇到的跨域请求被拦截问题。前端的端口是8080,而后端的端口是8000,前端请求后端的时后端会检查request的origin,发现是8080,跟自己的8000不一致,就会
在开发前后端分离的项目时,必须解决的一个问题就是跨域请求问题。
1 什么是跨域请求
跨域请求就是指:当前发起请求的域与该请求指向的资源所在的域不同时的请求。即“协议 + 域名 + 端口号” 有不相同,那么就是跨域。
例如,如下在开发中遇到的跨域请求被拦截问题。
前端的端口是8080,而后端的端口是8000,前端请求后端的时后端会检查request的origin,发现是8080,跟自己的8000不一致,就会有跨域拦截。
跨域请求问题可以在前端解决,也可以在后端解决。
1)前端的解决方法——使用正向代理,隐藏请求者真实地址。
使用正向代理时,后端发现请求方端口是8000(其实是代理的端口),认为是同源的就会放行。
vue项目的配置正向代理的做法是在.env.development和vue.config.js中添加以下配置。
2)后端解决方法
后端的做法很简单就是对跨域请求进行放行。
spring项目解决跨域请求问题的做法如下:
创建一个适配器ConfigurerAdapter实现WebMvcConfigurer接口的addCorsMappings方法,对所有跨域请求进行放行。
@Configuration
public class ConfigurerAdapter implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowCredentials(false)
.allowedMethods("POST","GET","DELETE","PUT","OPTIONS")
.allowedOrigins("*")
;
}
}
addCorsMappings()方法是设置跨域问题的,几乎是每个后台服务器都需要配置的东西。
还有另外一种解决方法,就是直接在对应Controller上添加@CrossOrigin注解,简单粗暴。
更多推荐
所有评论(0)