vue项目打包发布到Nginx后无法访问后端接口的解决办法
老套路,一图胜千言,先附上一张浏览器里请求后端数据的动图

作为一个桌面软件开发者,为了给客户出示推送数据到http接口的demo,耗费一周时间写了个vue请求后端http接口的程序,结果在vscode里运行,请求后端接口没问题,打包发布到nginx就请求失败了,此处记录一下解决过程。
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里面的地址
}
}
},
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无法访问后端接口内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
Vue3 elementUI如何修改el-date-picker默认时间
这篇文章主要介绍了Vue3 elementUI如何修改el-date-picker默认时间,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-08-08
vue2使用el-date-picker实现动态日期范围demo
这篇文章主要为大家介绍了vue2使用el-date-picker实现动态日期范围示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-06-06
vue+elementui 表格分页限制最大页码数的操作代码
这篇文章主要介绍了vue+elementui 表格分页限制最大页码数的操作代码,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-08-08
vue3+vue-router+vite实现动态路由的全过程
动态路由是根据不同情况实时变化的路由,在权限管理系统中,动态路由常用于根据用户角色分配不同的菜单和功能,这篇文章主要介绍了vue3+vue-router+vite实现动态路由的相关资料,需要的朋友可以参考下2024-10-10


最新评论