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 + socket.io实现一个简易聊天室示例代码

    vue + socket.io实现一个简易聊天室示例代码

    本篇文章主要介绍了vue + socket.io实现一个简易聊天室示例代码,具有一定的参考价值,有兴趣的可以了解一下。
    2017-03-03
  • Vue如何优雅的清除定时器

    Vue如何优雅的清除定时器

    定时器如果不及时合理地清除,会造成业务逻辑混乱甚至应用卡死的情况,这个时就需要清除定时器,本文就介绍了Vue如何优雅的清除定时器,感兴趣的可以了解一下
    2021-07-07
  • Vue3 elementUI如何修改el-date-picker默认时间

    Vue3 elementUI如何修改el-date-picker默认时间

    这篇文章主要介绍了Vue3 elementUI如何修改el-date-picker默认时间,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • vue2使用el-date-picker实现动态日期范围demo

    vue2使用el-date-picker实现动态日期范围demo

    这篇文章主要为大家介绍了vue2使用el-date-picker实现动态日期范围示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06
  • Vue导出el-table表格为Excel文件的两种方式

    Vue导出el-table表格为Excel文件的两种方式

    在开发过程中,我们经常需要将表格数据导出为 Excel 文件,大多数情况下,由后端处理即可,但是当数据量不大、需要快速响应用户操作、或者数据已经在前端进行处理和展示时,前端该如何实现呢,本文将介绍两种方法,需要的朋友可以参考下
    2024-09-09
  • Vue解决开发环境Ajax跨域问题的多种方法对比

    Vue解决开发环境Ajax跨域问题的多种方法对比

    本文将带大家深入理解跨域原理,并提供 Vue CLI(webpack)和 Vite 两种构建工具下的完整解决方案,让大家的开发流程更顺畅,希望对大家有所帮助
    2025-11-11
  • Vue.js 实现数据展示全部和收起功能

    Vue.js 实现数据展示全部和收起功能

    这篇文章主要介绍了Vue.js 实现数据展示全部和收起功能,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-09-09
  • vue+elementui 表格分页限制最大页码数的操作代码

    vue+elementui 表格分页限制最大页码数的操作代码

    这篇文章主要介绍了vue+elementui 表格分页限制最大页码数的操作代码,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-08-08
  • vue3+vue-router+vite实现动态路由的全过程

    vue3+vue-router+vite实现动态路由的全过程

    动态路由是根据不同情况实时变化的路由,在权限管理系统中,动态路由常用于根据用户角色分配不同的菜单和功能,这篇文章主要介绍了vue3+vue-router+vite实现动态路由的相关资料,需要的朋友可以参考下
    2024-10-10
  • Vue仿百度搜索功能

    Vue仿百度搜索功能

    这篇文章主要为大家详细介绍了Vue仿百度搜索功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-12-12

最新评论