在开发的过程中,难免会遇到跨域的情况,记录一下vue的前端代理是怎么使用的。
在vue.config.js中devServer配置,格式如下
module.exports = {
devServer: {
proxy: {
'/test': {
target: 'http://10.0.1.226:8080',
changeOrigin: true,
pathRewrite: {
'^/test': '/'
}
}
}
}
以上配置的意思为:
当url中包含’/test’的字段时,会将请求转发到http://10.0.1.226:8080
同时对xxxx/test的路径改写成’/’
例如: http://localhost:80/test/article => http://10.0.1.226:8080/arcticle
可以把‘/test’ 看成一个转发的标识
实际应用
我们在接口文件xxx.js中可以这么写
const v3 = 'test'// http://10.0.1.226:8080
export const getArticle = (query) => axios.get(`${v3}/article`, {params: query})
然后像上面一样,在vue.config.js中devServer配置就可以了