proxy代理的使用(解决跨域,配置多个代理)
一、什么是代理
字面意思就是类似中间商,开启代理,原理就是在本地创建一个虚拟服务器,发送请求数据,同时接受请求的数据,
利用服务器与服务器间,交互,不会有跨域问题,也是完全只靠前端自己独立解决跨域的方式
以vue cli3示例
我现在需要在本地请求接口
首先,在根目录下创建 vue 的配置文件 vue.config.js(必须叫这个名字)
// cli3 vue.config.js
devServer: {
proxy:{
"/api": {
target: "http://www.xiongmaoyouxuan.com", // 需要代理的域名
ws: false, // 是否启用websockets
changeOrigin: true, //开启代理:在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求 的数据,这样服务端和服务端进行数据的交互就不会有跨域问题
pathRewrite: { //重写匹配的字段,如果不需要在请求路径上,重写为""
"^/api": "/api"
}
},
},
}
//cli2的放在config文件夹中的index.js 中
dev: {
proxyTable:{
"/api": {
target: "http://www.xiongmaoyouxuan.com", // 需要代理的域名
ws: false, // 是否启用websockets
changeOrigin: true, //开启代理:在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求 的数据,这样服务端和服务端进行数据的交互就不会有跨域问题
pathRewrite: { //重写请求路径上匹配到的字段,如果不需要在请求路径上,重写为""
"^/api": "/api",
"demo.json": "index.json"
}
},
},
}
在创建axios的时候,beseURL这样配置
const ajax = axios.create({
baseURL:"/api",
timeout: 6000,//请求超时时间
})
创建的请求
export function getData() { //get
return request({
url: '/search/home',
method: 'GET'
})
}
这样匹配到这个字段时就会代理到target去,将target添加到/前面,在根据pathRewrite,然后是你请求的ajax
意思大概就是,你的beseURL加上你请求的url满足proxy的匹配,那你的代理就是没问题的
同时处理的也是匹配到的部分。
这样虚拟服务器请求的的就是
http://www.xiongmaoyouxuan.com/api/search/home
再看你本地请求的地址,是不是这个样子
配置多个代理
只需让你本地请求,满足代理的规则即可
proxy:{
"/api": {
target: "http://www.xiongmaoyouxuan.com",
// ws: true,
changeOrigin: true
pathRewrite: {
"^/api": "/api"
}
},
"/user": {
target: "http://www.xiongmaoyouxuan.com",
// ws: true,
changeOrigin: true
pathRewrite: {
"^/user": "/api"
}
},
},
创建axios的时候,beseURL配置:
const ajax = axios.create({
baseURL:"/",
timeout: 6000,//请求超时时间
})
创建的请求:
export function getData() { //get
return request({
url: 'api/search/home',
method: 'GET'
})
}
export function getData1() { //get
return request({
url: 'user/search/home',
method: 'GET'
})
}
这两个接口,通过代理请求的是同一个接口。这样看是否更好的理解了代理。