目录
1、什么是跨域
请求同域资源：
在域名 （或 ip 地址）相同，端口号相同下的请求资源，可以看做是同域资源
请求跨域资源：
请求的资源只要 是域名（或 ip 地址）、端口号中任意一个不同的资源都可以认为是跨域资源
如：
端口号不同
127.0.0.1:80与127.0.0.1:8888属于跨域
域名 (或 ip 地址) 不同
127.0.0.1:80与www.baidu.com:80属于跨域
2、前后端分离项目中的跨域问题
例如：
前端 vue项目：127.0.0.1:70
后端 SpringBoot项目：127.0.0.1:8888
我们在前端 vue 项目中存放页面，页面中的数据是通过 axios 发起异步请求从 后端 SpringBoot项目中获取的
因此当我们访问前端页面时候， 我们可以理解为所在的当前所在127.0.0.1:70 域上，所以访问这个127.0.0.1:70 域的资源都是OK的，但如果使用 js 的方法访问其他域的资源时就会出现跨域问题
本次教程拿验证码举例：
浏览器输入127.0.0.1:70 访问登录资源，在 login.vue 中的 created 方法中调用 获取验证码方法( 发起axios 请求127.0.0.1:8888)
此时就会出现跨域的问题
3、方法一：SpringBoot后端进行处理
在 每个 Controller 类上加入 @CrossOrigin 注解
或者
在 Controller的基类中加上 @CrossOrigin 注解然后其他 Controller 类就有了这个 @Controller
此时跨域访问就不会报错了。
login.vue 访问的后端地址:
4、方法二：在Vue前端进行处理
浏览器 在同一个页面访问不同的域 是存在跨域问题的
但 服务器之间的访问是 没有跨域问题
因此 需要在前端设置代理， 通过代理访问 SpringBoot后端API
4.1 安装代理
cnpm install --save-dev http-proxy-middleware4.2 配置请求 baseURL
在src / utils / request.js中
// 创建axios实例
const service = axios.create({
// axios中请求配置有baseURL选项，表示请求URL公共部分
// baseURL: 'http://127.0.0.1:8888/ruoyi',
baseURL: '/api',
// changeOrigin: true,
// 超时
timeout: 10000
})4.3 配置 proxy
在vue.config.js中
module.exports = {
devServer: {
// 自动打开浏览器
open: true,
port: 70,
proxy: {
// // detail: https://cli.vuejs.org/config/#devserver-proxy
'/api': {
target: `http://localhost:8888/ruoyi`,
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
}
}4.4 login.vue 页面发送验证码的请求
请求 API
import request from '@/utils/request'
// 获取验证码
export function getCodeImg() {
return request({
url: '/captcha/captchaImage?type=math',
method: 'get'
})
}请求的截图:
我们发现 请求验证码的地址是前端服务器的地址
http://localhost:70/api/captcha/captchaImage?type=math
但我们配置了 proxy
5、总结
跨域解决方案有很多种，如
- 使用 nginx代理
- 使用 filter 添加头信息
- 使用 @CrossOrigin 注解
- 使用 proxy 代理
@CrossOrigin 注解解决方案的优缺点:
优点:
- 使用起来简单，直接在Controller类上加 @CrossOrigin 注解即可
缺点:
- 如果后端技术使用的不是 SpringBoot，后端代码还需要处理跨域问题
- 浏览器直接访问 后端API，在某种程度上是不太安全的
proxy 解决跨域问题优缺点
优点：
- 在浏览器中屏蔽了实际访问后端的 地址，相对安全
- 后端代码不必要进行额外处理跨域
缺点：
- 在浏览器中看不到后端访问的地址，开发阶段调试不太方便