要解决跨域问题,首先要了解浏览器的同源策略
同源策略:著名的安全策略,URL有三个基本组成部分:协议+域名或ip+端口,三个必须完全相同称之为同源,不同源的称之为跨域
跨域并不会阻止请求的发出,也不会阻止请求的接受,
跨域是浏览器为了保护当前页面,你的请求得到了响应,
浏览器不会把响应的数据交给页面上的回调,
取而代之的是去提示你这是一个跨域数据。
提示就是一个报错提示,就像这样:
Access to XMLHttpRequest at 'http://localhost:8082/user/login'
from origin 'http://localhost:8080' has been blocked by
CORS policy: No 'Access-Control-Allow-Origin'
header is present on the requested resource.
背景:
本地分别启动前端、后端项目进行调试。
前端项目地址 http://localhost:8080
后端项目地址 http://localhost:8082
解决方式有多种,以下前后端方案任选一个即可
一、前端改造
两种方式:
1. vue.config.js文件增加代理设置
module.exports = {
devServer:{
proxy:{
'/api':{//表示拦截以/api开头的请求路径
target:'http://localhost:8082',
changOrigin: true,//是否开启跨域
pathRewrite:{
'^/api':'' //重写api,把api变成空字符,因为我们真正请求的路径是没有api的
}
}
}
}
}
其它用到ip的地方替换为"/api"
2. 引入插件 “koa-cors”
二、后端改造
两种方式:
- 方法上添加 @CrossOrigin 注解
@PostMapping("login")
@ResponseBody
@CrossOrigin
public String login(String name, String password) {
System.out.println("name:" + name);
if ("123".equals(name) && "123".equals(password)) {
return "token123456";
}
return "登录失败";
}
- 设置全局拦截器
@Configuration
@Slf4j
public class WebConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOriginPatterns("*")
.allowCredentials(true)
.allowedHeaders("*")
.allowedMethods("*")
.maxAge(3600);
}
}