vue使用proxy来解决跨域问题
一个项目中,接口是同一路径但是端口号不同,不同的功能请求不同的端口号这个需求如何进行proxy来解决跨域,vue2.0
vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
publicPath: './'
devServer: {
proxy: {
'/api': {
target: 'https://aaaa:8202',
changeOrigin: true, //允许跨域
//重定向的作用,一般情况下接口中都含有api,如果项目接口中含有api并且target中写了api,则需要重定向替换,不写的话则不需要,根据项目需要来,我的项目中没有api,所以没写
pathRewrite: {
'^/api': '', //重定向为空字符串时表示请求的地址为: https://aaaa:8202/abc/getAbcList
'^/api': 'api' //这种写法请求地址为:https://aaaa:8202/api/abc/getAbcList
}
},
'/web': {
target: 'https://aaaaa:8203',
changeOrigin: true,
pathRewrite: {
'^/web': ''
}
},
'/five': {
target: 'https://aaaa:8204',
changeOrigin: true,
pathRewrite: {
'^/five': ''
}
}
}
}
})
api.js
import request from '../utils/request'
// 测试接口
export function getAdminList (data) {
return request({
method: 'post', // 请求方式
url: 'api/abc/getAbcList', // 接口路径
params: data, // 数据
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
})
}
// 测试接口
export function addNewAdmin (data) {
return request({
method: 'post', // 请求方式
url: 'web/abc/getAbcList', // 接口路径
data: data
})
}
// 测试接口
export function addNewAdmin (data) {
return request({
method: 'post', // 请求方式
url: 'five/abc/getAbcList', // 接口路径
data: data
})
}
request.js的封装可以参考这个:vue封装axios