
Vue打包上线后的跨域问题处理
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue

·
由于开发环境和生产环境的不同,会导致vue访问出现跨域的问题。
一、开发环境跨域问题
1.config/index.js文件配置代理,找到proxyTable字段,如下面一样配置
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/xxx': {
target: 'http://xxx/api', //访问的接口1
changeOrigin: true,
pathRewrite: {
'^/xxx': '/'
}
},
'/yyy': {
target: 'http://yyy/api', //访问的接口2
changeOrigin: true,
pathRewrite: {
'^/yyy': '/'
}
},
},
配置好后 访问的url就不用再其他地方带上域名了。这个只适合开发环境使用,因为开发环境的本地服务器,以及做好了代理的功能,无需去多余的操作。
二.生产环境跨域问题
Nginx服务后端配置
location /api/geocoder/ {
#limit_conn perip 2;
#limit_rate 100K;
add_header 'Access-Control-Allow-Origin' '*';
#proxy_set_header Host $host; #这个需要注释,如果不注释会不能访问
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass https://api.tianditu.gov.cn/geocoder/;
client_max_body_size 10M;
}
以上就是nginx做的配置,需要记住 “/”这个符号很重要 不能少任何一个,认真看好所有“/”的地方,否则会发送错误的请求地址。
简单解释下配置:
当请求地址带有/api/geocoder/的时候,会自动将地址替换成https://api.tianditu.gov.cn/geocoder/来发送请求
举例:
请求地址:http://www.kalec.com/api/geocoder/order/list?page=1(外网请求地址)
经过nginx转发后:https://api.tianditu.gov.cn/geocoder/order/list?page=1(内网请求地址)




vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:5 个月前 )
9e887079
[skip ci] 4 个月前
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 7 个月前
更多推荐
所有评论(0)