vue项目打包发布到Nginx后无法访问后端接口的解决办法
更新时间：2024年04月03日 08:27:19 作者：x县豆瓣酱
这篇文章主要给大家介绍了关于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无法访问后端接口内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
相关文章
本文主要介绍了五分钟教你使用vue-cli3创建项目，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
最近遇到个功能要求,想要在全局中调用组件,而且要在某些js文件内调用,所以这篇文章主要给大家介绍了关于如何利用Vue3实现一个可以用js调用的组件的相关资料,需要的朋友可以参考下2021-08-08
vite+vue3+element-plus搭建项目的踩坑记录
这篇文章主要介绍了vite+vue3+element-plus搭建项目的踩坑记录,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要为大家介绍了绘制flowable 流程图的Vue 库使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
Vue 基础语法之计算属性(computed)、侦听器(watch)、过滤器(filters)详解
计算属性就是 Vue 实例选项中的 computed，computed 的值是一个对象类型，对象中的属性值为函数，而且这个函数没办法接收参数，这篇文章主要介绍了Vue 基础语法之计算属性(computed)、侦听器(watch)、过滤器(filters)详解,需要的朋友可以参考下2022-11-11
echarts原生提供了相应的API,只需要在配置好echarts之后绑定相应的事件即可,下面这篇文章主要给大家介绍了关于vue实现echarts饼图/柱状图点击事件的相关资料,需要的朋友可以参考下2023-06-06
这篇文章主要为大家展示了一个demo，即利用Vue和OpenLayer在地图上面添加风场效果，文中的示例代码讲解详细，感兴趣的小伙伴可以了解一下2022-04-04
这篇文章主要给大家介绍了关于Vue.js使用Vuex与axios发送请求的相关资料，文中介绍的非常详细，相信对大家具有一定的参考价值，需要的朋友们下面来一起看看吧。2017-04-04
这篇文章主要介绍了vue中多个倒计时实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-03-03
Vue3已经稳定了相当长一段时间了。许多代码库都在生产环境中使用它，其他人最终都将不得不迁移到Vue3。我现在有机会使用它并记录了我的错误，下面这些错误你可能想要避免2023-03-03
最新评论