\/ itspcool 交流学习
请求同域资源：
在协议，域名 （或 ip 地址）相同，端口号相同下的请求资源，可以看做是同域资源
请求跨域资源：
请求的资源只要 是协议 、域名（或 ip 地址）、端口号中任意一个不同的资源都可以认为是跨域资源
如：
端口号不同
127.0.0.1:80 与 127.0.0.1:8888 属于跨域
域名 (或 ip 地址) 不同
127.0.0.1:80 与 www.baidu.com:80 属于跨域
例如：
前端 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
cnpm install axios
在 src / utils / request.js 中
// 创建axios实例
const service = axios.create({
baseURL: ‘/api‘,
timeout: 10000
})
/*如果直接把baseURL设置为http://localhost:8888/xxx
然后进行接口访问是会报跨域的，所以下边继续设置代理，
也就是把请求拦截，然后代理发收，也就是在跨域的两者之间做一个中间站，
这个中间站是建立在和前端同域下的，所以二者交互不跨域。
又因为中间站是一个小服务器，和后台交互也不会存在跨域的问题。因此这个方法可以解决跨域
前边提到baseURL设置啥都没事，反正会被拦截，做处理，那我们就索性不设置http://localhost:8888/xxx，
倒不如直接设置/api，这样在处理拦截的时候更方便一些
*/
这样会为所有的 请求url 前面都加上 ‘/api’，方便做 统一代理
在 vue.config.js 中
module.exports = {
devServer: {
// 自动打开浏览器
open: true,
port: 70,
proxy: {
‘/api‘: {
target: `http://localhost:8888/ruoyi`,
changeOrigin: true,//开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
pathRewrite: {
‘^/api‘: ‘‘
}
}
}
}
}
请求 API
import request from ‘@/utils/request‘
// 获取验证码
export function getCodeImg() {
return request({
url: ‘/captcha/captchaImage?type=math‘,
method: ‘get‘
})
}
相当于请求遇见 /api 才做代理，但真实的请求中没有/api，所以在pathRewrite中把 /api 去掉, 这样既有了标识, 又能在请求接口中把 /api 去掉
前端从后端剥离，形成一个前端工程，前端只利用Json来和后端进行交互，后端不返回页面，只返回Json数据。前后端之间完全通过public API约定。
前端 Vue + ElementUI + Vue router + Vuex + axios + webpack
Spring Boot + Vue3 前后端分离，实战wiki知识库系统
原文：https://www.cnblogs.com/lateatin/p/14449336.html