vue 配置proxy 解决跨域
前言:现在开发大多是前后端分离,在调接口调时候,必然会出现跨域的问题,可以后台配置解决,也可以前端配置。vue 最常用的就是配置proxy 来解决。具体如下:1)首先在最外层新建vue.config.js 。在里面配置。一下,所有访问以/admin,/api 开头的接口,都会被代理,访问到下面target 的网络地址。pathRewrite 为替换的地址,意思为把 /admin 或者 /api 在
·
前言:现在开发大多是前后端分离,在调接口调时候,必然会出现跨域的问题,可以后台配置解决,也可以前端配置。vue 最常用的就是配置proxy 来解决。具体如下:
1)首先在最外层新建vue.config.js 。在里面配置。一下,所有访问以/admin,/api 开头的接口,都会被代理,访问到下面target 的网络地址。
pathRewrite 为替换的地址,意思为把 /admin 或者 /api 在请求接口是替换为什么,我的就是替换为空。
module.exports = {
devServer: {
overlay: {
// 让浏览器 overlay 同时显示警告和错误
warnings: true,
errors: true
},
host: 'localhost',
port: 8080, // 端口号
https: false, // https:{type:Boolean}
open: true, // 配置自动启动浏览器
hotOnly: true, // 热更新
proxy: {
'/admin': {
target: `http://xx.xxx.xxx.xxx/`, //访问的服务器地址
changeOrigin: true,
ws: true, //启用websockets
pathRewrite: {
'^/admin': '' //替换规则
}
},
'/api': {
target: `http://xx.xxx.xxx.xxx/`,
changeOrigin: true,
ws: true,
pathRewrite: {
'^/api': ''
}
},
},
headers: {
'Access-Control-Allow-Origin': '*',
}
}
};
2.定义接口时如下
// 接口地址为 /admin/user/login
//请求地址
axios.post(`/admin/admin/user/login`, params).then(...)
// 因为我把/admin 替换为空,所以我要在下面多拼接一个/admin,请求的时候就会变成 hTTP://XX.XXX.XXX.XXX/admin/user/login
// 这个地方可以根据自己代码自行分配
最后,重启项目,vue 就解决了跨域
更多推荐
已为社区贡献11条内容
所有评论(0)