Vue跨域问题(踩坑指南)
Vue跨域问题(踩坑指南)在刚开始学习vue的时候,大家肯定都遇到过很多大大小小的问题,下面是我的爬坑记录-------vue跨域问题一、开发环境配置在vue.config中,配置以下内容module.exports={devServer:{host:'localhost',port:'8080',open:true,proxy:{"/api": {target: "ht
·
Vue跨域问题(踩坑指南)
在刚开始学习vue的时候,大家肯定都遇到过很多大大小小的问题,下面是我的爬坑记录-------vue跨域问题
一、开发环境配置
在vue.config
中,配置以下内容
module.exports={
devServer:{
host:'localhost',
port:'8080',
open:true,
proxy:{
"/api": {
target: "http://www.baidu.com", // api地址
ws: true, // 代理的WebSockets
changeOrigin: true, // 允许websockets跨域
pathRewrite: {
"^/api": ""
}
}
},
}
}
配置完成后,在axios请求前面加上/api,api地址会代理成http://www.baidu.com/xxx/xxx
例如:
这时,开发环境的跨域问题就解决了
二、生产环境的配置
先将项目打包npm run build
,然后上传到服务器
如果你使用的宝塔面板,配置更加简单
linux服务器配置跟宝塔一样,只不过宝塔提供了可视化操作
nginx配置
location /{
root /www/wwwroot/demo;
index index.html;
}
location /api {
add_header 'Access-Control-Allow-Origin' '*';
proxy_pass http://www.baidu.com/;
}
注意:proxy_pass地址后面一定要加“/”,否则
最后,生产环境配置完成,祝大家爬坑顺利,有问题欢迎留言
更多推荐
已为社区贡献1条内容
所有评论(0)