Vue项目配置代理
前端向服务器发送请求时，经常会遇到跨域问题，那么什么是前端跨域呢？
在vue项目中如何利用代理解决呢？
1. 这里以axios发请求为例
axios.get("/abc/def");
axios.get("/abc/ghi");
axios.post("/abc/jkm");axios发送的请求是本地的服务器地址拼接上发送的请求，如 http://localhost:8080/abc/def
2. 如果发送的请求都以 /abc 开头
那么我们就可以在proxy中进行服务器代理配置。
devServer: {
proxy: {
"/abc": {
target: "http://XX.XX.XX.XX:8081",
changeOrigin: true,
ws: true,
secure: false,
},
},
},"/abc":{} : 引号中代表监测的是以 /abc 开头的接口
target : 代表监测到以 /abc 开头的接口后，把axios请求中前面的本地服务器地址改为后端接口地址，实际发送给后端的请求就是下方后一个请求
http://localhost:8080/abc/def --> http://XX.XX.XX.XX:8081/abc/def
changeOrigin: 是否跨域ws: 如果要代理 websockets，配置这个参数secure: 如果是https接口，需要配置这个参数（如果是http接口，也可以不写这个参数）pathRewrite：替换请求中匹配的内容。在3的方法2中详细解释用法，上方未使用此参数
3. 代理多个接口
http://localhost:8080/zzz/one
http://localhost:8080/xxx/two
方法1：监测多个接口，可以在proxy中写多个配置：（适用于target不同的代理，相同也可以用这个方法，就是会麻烦一点，对于相同的target方法2会比较方便）
devServer: {
proxy: {
"/zzz": {
target: "http://XX.XX.XX.XX:8082",
changeOrigin: true,
ws: true,
},
"/xxx": {
target: "http://XX.XX.XX.XX:8083",
changeOrigin: true,
ws: true,
},
},
},那么实际发送给后端的请求就是：
http://XX.XX.XX.XX:8082/zzz/one
http://XX.XX.XX.XX:8083/xxx/two
方法2：使用axios进行前设置（适用于target相同的代理）
// 一般在全局设置里引入，例如main.js，方便第二行的配置被每一个axios请求识别
import axios from "axios";
// 只要发送axios请求，就在请求前加入/api的开头，例如 /zzz/one -> /api/zzz/one
axios.defaults.baseURL = "/api"; 进行了上方的配置后，在本地发送的请求会变为
http://localhost:8080/api/zzz/one
http://localhost:8080/api/xxx/two
而后可以设置只监听 "/api" 的代理，不过要设置pathRewrite参数：
devServer: {
proxy: {
"/api": {
target: "http://XX.XX.XX.XX:8084",
changeOrigin: true,
ws: true,
pathRewrite: {
"^/api": "",
},
},
},
},pathRewrite ：检查代理的请求中是否有 /api ，有的话把 /api 替换为冒号后面的内容，案例为替换成空字符串，也就是删去 /api 。（^是正则表达式的内容，意思是限定开头）
- 本地请求 http://localhost:8080/api/zzz/one ->
- 代理后请求 http://XX.XX.XX.XX:8084/api/zzz/one ->
- 设置pathRewrite后的请求 http://XX.XX.XX.XX:8084/zzz/one
- 所以代理完成后真正发送给后端的请求就是 http://XX.XX.XX.XX:8084/zzz/one 啦。
1.统一给请求添加/api方便监测代理 2.统一删去/api发送正确的请求）
- 注意：小伙伴们可能会看到浏览器中右键检查打开的控制台中，网络->标头->常规，中的请求网址显示的还是 http://XX.XX.XX.XX:8084/api/zzz/one 。
- 这是因为浏览器的同源策略，经过代理设置的请求发送给后端已经变成 http://XX.XX.XX.XX:8084/zzz/one 没有/api 的形式了，不用被浏览器显示的请求网址干扰。
- 如果实在不想看到浏览器的请求网址中有api，可以采用方法1。
什么是跨域？
JavaScript同源策略：当协议、子域名、主域名、端口号中任意一个不相同时，都算作不同域。
不同域之间相互请求资源，就算作“跨域”。
同源策略要求源相同才能正常进行通信，即协议、域名、端口号都完全一致。**同源策略限制：**表单提交、AJAX请求等。
注意：跨域并不是请求发不出去，请求能发出去，服务端能收到请求并正常返回结果，只是结果被浏览器拦截了。
proxy代理解决跨域
**原理：**浏览器是禁止跨域的，但是服务端不禁止，在本地运行npm run serve等命令时实际上是用node运行了一个服务器，因此proxyTable实际上是将请求发给自己的服务器，再由服务器转发给后台服务器，做了一层代理，因此不会出现跨域问题。
当我们在用本机去找服务器要数据时会产生跨域问题，所以利用vue-cli去开启一个代理服务器。
配置（vue.config.js）
方法一
优点：配置简单、请求资源时直接发给前端（8080）即可
缺点：不能配置多个代理，不能灵活的控制请求是否走代理
当请求了前端不存在的资源时，该请求会转发给服务器(优先匹配前端资源)
module.exports = {
devServer: {
proxy: 'http://localhost:5000',
}
}方法二
优点：可以配置多个代理，且可以灵活的控制请求是否走请求
缺点：配置繁琐，请求资源时必须加前缀
//开启代理服务器(方法二)
devServer: {
proxy: {
// '/yu'为请求前缀，用于控制是不是走代理，想走代理时就在请求前缀前边加上这个请求前缀
'/yu': {
target: 'http://localhost:5000',
pathRewrite: { "^/yu": "" }, //重写路径 匹配以/yu为开头的路径都变为空字符串
ws: true, //用于支持websocket
changeOrigin: true //用于控制请求头中的host值
},
'/demo': {
target: 'http://localhost:5001',
pathRewrite: { "^/demo": "" },
ws: true, //用于支持websocket
changeOrigin: true //用于控制请求头中的host值
},
}
}请求时：
请求前缀必须跟着端口号
getStudents() {
axios.get("http://localhost:8081/yu/students").then(
(response) => {
console.log("请求成功了", response.data);
},
(error) => {
console.log("请求失败了", error.message);
}
);
},
getCars() {
axios.get("http://localhost:8081/demo/cars").then(
(response) => {
console.log("请求成功了", response.data);
},
(error) => {
console.log("请求失败了", error.message);
}
);
},1.vue-cli 2 是在路径为config/index.js的文件下proxyTable里配置的，该文件是整个项目的主要配置入口
// node自带路径工具.
var path = require('path')
// 分为两种环境，dev和production
module.exports = {
dev: {
// 配置好后一定要关闭原来的server，重新npm run dev启动项目。不然无效。
proxyTable: { // 需要代理的接口，可以跨域
// 用‘/api'开头，代理所有请求到目标服务器
'/api': {
target: 'http:xxx.com', // 目标接口域名
changeOrigin: true, // 是否启用跨域
pathRewrite: { //这里要理解成用'/api'代替target里面的地址，后面的组件中我们调用接口的时候直接用api代替，比如我要调用'http://40.00.100:3002/user/add'，直接写成'/api/user/add'即可
'^/api': '' // 即/api相当于http://40.00.100:3002
}
}
}
}
}注意：‘/api’ 为匹配项，因为在 ajax 的 url 中加了前缀 ‘/api’，而原本的接口是没有这个前缀的，所以需要通过 pathRewrite 来重写地址，将前缀 ‘/api’ 转为 ‘/’。
如果本身的接口地址就有 ‘/api’ 这种通用前缀，就可以把 pathRewrite 删掉。
2.vue-cli 3 是自己在根目录下新建vue.config.js文件，在devServer.proxy对象里配置（当然也有其他方式），配置后会和隐藏的配置自动进行整合
module.exports = {
// cli3 代理是从指定的target后面开始匹配的，不是任意位置；配置pathRewrite可以做替换
devServer: {
proxy: {
'/yourapi': { //代理api，/yourapi的意义在于，声明axios中url已/api开头的请求都适用于该规则，注意是以/yourapi开头，即：axios.post({url: '/yourapi/xxx/xxx'})
target: 'yourserver', //服务器真实api地址，即需要请求的目标接口，此处target的意义在于：造成跨域是因为访问的host与我们的请求头里的origin不一致，所以我们要设置成一致，这个具体请看下文
changeOrigin: true, //是否跨域，true为开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
ws: true, // 是否启用websockets，根据实际情况看是否需要配置该项
pathRewrite: {
'^/yourapi': 'https://我是服务器/api' //重写路径
// 此处是大部分文章都不会明说的的地方，
// 既然我们设置了代理，则所有请求url都已写成/yourapi/xxx/xxx，那请求如何知道我们到底请求的是哪个服务器的数据呢
// 因此这里的意义在于， 以 /yourapi开头的url请求，代理都会知道实际上应该请求那里，
// ‘我是服务器/yourapi'，后面的/api根据实际请求地址决定，即我的请求url：/yourapi/test/test，被代理后请求的则是
// https://我是服务器/yourapi/test/test
}
}
}
}
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。
