vue项目打包发布到Nginx后无法访问后端接口的解决办法

 更新时间:2024年04月03日 08:27:19   作者:x县豆瓣酱  
这篇文章主要给大家介绍了关于vue项目打包发布到Nginx后无法访问后端接口的解决办法,记录一下项目需要注意的地方,方便以后快速使用,文中通过代码介绍的非常详细,需要的朋友可以参考下
(福利推荐:【腾讯云】服务器最新限时优惠活动,云服务器1核2G仅99元/年、2核4G仅768元/3年,立即抢购>>>:9i0i.cn/qcloud

(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun

老套路,一图胜千言,先附上一张浏览器里请求后端数据的动图

作为一个桌面软件开发者,为了给客户出示推送数据到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无法访问后端接口内容请搜索程序员之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持程序员之家!

相关文章

  • antdv的table因数据量过大导致的卡顿问题及解决

    antdv的table因数据量过大导致的卡顿问题及解决

    这篇文章主要介绍了antdv的table因数据量过大导致的卡顿问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11
  • Vue 2源码解析HTMLParserOptions.start函数方法

    Vue 2源码解析HTMLParserOptions.start函数方法

    这篇文章主要为大家介绍了Vue 2源码解析HTMLParserOptions.start函数方法,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • vue项目实现面包屑导航

    vue项目实现面包屑导航

    这篇文章主要为大家详细介绍了vue项目实现面包屑导航,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • Ant?Design?of?Vue?select框获取key和name的问题

    Ant?Design?of?Vue?select框获取key和name的问题

    这篇文章主要介绍了Ant?Design?of?Vue?select框获取key和name的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06
  • 深入了解vue中一键复制功能的实现

    深入了解vue中一键复制功能的实现

    在现代的Web应用中,用户体验至关重要,而提供简单易用的复制功能是改善用户体验的一项关键功能,本文将为大家详细介绍Vue实现一键复制功能的具体方法,需要的可以参考下
    2023-11-11
  • vue项目中echarts自适应问题的高级解决过程

    vue项目中echarts自适应问题的高级解决过程

    虽然老早就看过很多echarts的例子,但自己接触的项目中一直都没有真正用到过,直到最近才开始真正使用,下面这篇文章主要给大家介绍了关于vue项目中echarts自适应问题的高级解决过程,需要的朋友可以参考下
    2023-05-05
  • 浅谈vue的生命周期

    浅谈vue的生命周期

    这篇文章主要为大家介绍了vue的生命周期,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-01-01
  • Vue给?elementUI?中的?this.$confirm、this.$alert、?this.$prompt添加按钮加载效果

    Vue给?elementUI?中的?this.$confirm、this.$alert、?this.$promp

    这篇文章主要介绍了Vue给?elementUI?中的?this.$confirm、this.$alert、?this.$prompt添加按钮的加载效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-07-07
  • Vue+ElementUI踩坑之动态显示/隐藏表格的列el-table-column问题

    Vue+ElementUI踩坑之动态显示/隐藏表格的列el-table-column问题

    这篇文章主要介绍了Vue+ElementUI踩坑之动态显示/隐藏表格的列el-table-column问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11
  • 详解auto-vue-file:一个自动创建vue组件的包

    详解auto-vue-file:一个自动创建vue组件的包

    这篇文章主要介绍了auto-vue-file:一个自动创建vue组件的包,需要的朋友可以参考下
    2019-04-04

最新评论

?


http://www.vxiaotou.com