vue项目打包发布到Nginx后无法访问后端接口的解决办法
脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用
老套路,一图胜千言,先附上一张浏览器里请求后端数据的动图
作为一个桌面软件开发者,为了给客户出示推送数据到http接口的demo,耗费一周时间写了个vue请求后端http接口的程序,结果在vscode里运行,请求后端接口没问题,打包发布到nginx就请求失败了,此处记录一下解决过程。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | vue跨域代码 module.exports = { dev: { // Paths assetsSubDirectory: 'static' , assetsPublicPath: '/' , proxyTable: { '/api' : { target: 'http://192.168.0.100:8090/' , //要解决跨域的接口的域名 secure: false , //如果是https接口,需要配置这个参数 changeOrigin: true , // 如果接口跨域,需要进行这个参数配置 pathRewrite: { '^/api' : '' // 路径重写,这里的api代替target里面的地址 } } }, |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | nginx配置文件代码 #access_log logs/host.access.log main; location / { root D:/xxx/web/vue001/; index index.html index.htm; } #error_page 404 /404.html; # redirect server error pages to the static page /50x.html # error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } # proxy the PHP scripts to Apache listening on 127.0.0.1:80 # location /api/{ proxy_pass http: //192.168.0.100:8090/; } |
其中的关联性,分析一下应该能看明白,我也是初学就不在此卖弄了,问题是解决了,怎么解决的,原理是什么,后续如果深入这个领域再补课吧。
总结
到此这篇关于vue项目打包发布到Nginx后无法访问后端接口的解决办法的文章就介绍到这了,更多相关vue打包发布Nginx无法访问后端接口内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
微信公众号搜索 “ 脚本之家 ” ,选择关注
程序猿的那些事、送书等活动等着你
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!
最新评论