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中动态添加类名

    详解如何在Vue中动态添加类名

    本文主要介绍了如何在Vue中动态添加类名,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-07-07
  • vue路由传参接收以及传参对象为对象时的问题及解决

    vue路由传参接收以及传参对象为对象时的问题及解决

    这篇文章主要介绍了vue路由传参接收以及传参对象为对象时的问题及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • vue实现登陆功能

    vue实现登陆功能

    这篇文章主要为大家详细介绍了vue实现登陆功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • Vue脚手架的简单使用实例

    Vue脚手架的简单使用实例

    这篇文章主要介绍了Vue脚手架的简单使用实例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • vue-admin如何实现动态路由

    vue-admin如何实现动态路由

    这篇文章主要介绍了vue-admin如何实现动态路由问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07
  • Element-ui upload上传文件限制的解决方法

    Element-ui upload上传文件限制的解决方法

    这篇文章主要介绍了Element-ui upload上传文件限制的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • vue深拷贝的三种实现方式示例详解

    vue深拷贝的三种实现方式示例详解

    vue深拷贝的三种实现方式:1、通过递归方式实现深拷贝;2、JSON.parse(JSON.stringify(obj));3、jQuery的extend方法实现深拷贝,本文通过实例代码给大家介绍的非常详细,需要的朋友参考下吧
    2023-11-11
  • 解决使用vue.js路由后失效的问题

    解决使用vue.js路由后失效的问题

    下面小编就为大家分享一篇解决使用vue.js路由后失效的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • Vue中Rule的使用方式

    Vue中Rule的使用方式

    这篇文章主要介绍了Vue中Rule的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-02-02
  • vue如何实现清空this.$route.query的值

    vue如何实现清空this.$route.query的值

    这篇文章主要介绍了vue如何实现清空this.$route.query的值,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09

最新评论