终于搞懂了 VUE 的代理和 NGINX 的代理区别了!_vue nginx.conf 和kong的优先级-程序员宅基地

技术标签: 运维  前端  

前端小白一枚,在开发一个 vue 项目,之前开发的时候遇到了跨域问题,通过网上冲浪自己配置了 vue 代理,美滋滋的认为一劳永逸了。 vue 代理配置如下:

在 vue.config.js 中配置
proxy: {
    
    '/api': {
    
        target: 'http://localhost:8080',
        changeOrigin: true,
        pathRewrite: {
    
            '^/api': ''
        }
    }
}

target: 接口域名;

changeOrigin: 如果设置为true,那么本地会虚拟一个服务端接收你的请求并代你发送该请求;

pathRewrite: 如果接口中是没有api的,那就直接置空(如上)。如果接口中有api,就需要写成{‘^/api’:‘/api’}

但是!当开完成在服务器上部署的时候,又通过网上冲浪了解到 nginx 也要配置代理,这我就迷糊了,怎么两个代理。
然后仍然要通过网上冲浪查找答案,这时我才明白,原来 vue.config.js 中配置的代理只是解决了开发环境的跨域,上线时需要配置 nginx 代理!

在 nginx.conf 中的配置
location / {
    
    root   /nginx/html;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
}
location /api/ {
    
    proxy_next_upstream http_500 http_502 http_503 http_504 error timeout invalid_header;
    proxy_set_header Host $host;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_pass http://127.0.0.1:8123;  #代理的ip
    expires 24;
}
root /nginx/html;
location ^~/reqInfo {
    
    try_files $uri $uri/ /reqInfo /index.html;
}
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_41474364/article/details/103594622

智能推荐

大象机器人开源六轴协作机械臂myCobot 320 手机摄影技术!

这些问题标志着我后续研究的重点方向,需要我继续深入学习AVFoundation框架的使用,特别是其控制摄像头的具体方法,并探索如何将这些控制整合到机械臂的运动调整中,以确保最终拍摄出的视频质量符合预期。尽管目前市场上有许多稳定设备如平衡环架(gimbal)来辅助拍摄,以求达到稳定和多角度的拍摄效果,但在此篇文章中,我将探索一种独特的解决方案:通过将手机安装在机械臂的末端来进行拍摄,以实现那些传统方法难以捕捉的特殊视角。随着人工智能技术的不断进步和普及,AI与机器人的结合无疑将成为未来技术发展的重要趋势。

【计算机毕业设计】springboot党员之家服务系统小程序-程序员宅基地

文章浏览阅读342次,点赞6次,收藏8次。党员之家服务系统小程序的功能已基本实现,主要包括首页、个人中心、学生管理、教师管理、任务信息管理、报名信息管理、任务排名管理、学习资料管理、每日打卡管理、交流信息管理、回复信息管理、积极分子管理、党员信息管理、交流论坛、系统管理等。论文主要从系统的分析与设计 、数据库设计和系统的详细设计等几个方面来进行论述,系统分析与设计部分主要论述了系统的功能分析、系统的设计思路,数据库设计主要论述了数据库的设计,系统的详细设计部分主要论述了几个主要模块的详细设计过程。

Failed to discover available identity versions when contacting http://controller:35357/v3. 错误解决方式_caused by newconnectionerror('<urllib3.connection.-程序员宅基地

文章浏览阅读8.3k次,点赞5次,收藏12次。作为 admin 用户,请求认证令牌,输入如下命令openstack --os-auth-url http://controller:35357/v3 --os-project-domain-name default --os-user-domain-name default --os-project-name admin --os-username admin token issue报错Failed to discover available identity versions whe._caused by newconnectionerror('

学校机房统一批量安装软件的方法来了_教室电脑 一起装软件-程序员宅基地

文章浏览阅读4.5k次。​可以在桌面安装云顷还原系统软件,利用软件中的网络对拷功能部署批量对拷环境,进行电脑教室软件的批量对拷安装与增量对拷安装。​_教室电脑 一起装软件

消息队列(kafka/nsq等)与任务队列(celery/ytask等)到底有什么不同?_任务队列和消息队列-程序员宅基地

文章浏览阅读3.1k次,点赞5次,收藏7次。原文链接:https://www.ikaze.cn/article/43写这篇博文的起因是,我在论坛宣传我开源的新项目YTask(go语言异步任务队列)时,有小伙伴在下面回了一句“为什么不用nsq?”。这使我想起,我在和同事介绍celery时同事说了一句“这不就是kafka吗?”。那么YTask和nsq,celery和kafka?他们之间到底有什么不同呢?下面我结合自己的理解。简单的分析一..._任务队列和消息队列

Java调KT类_java 调用kt 对象-程序员宅基地

文章浏览阅读1.5k次。1,MyUtuils.kt将被调用的文件class MyUtils { fun show(info:String){ println(info) }}fun show(info:String){ println(info)}2,Java文件调用该类,ClientJava.javapublic class ClientJava { public static void main(String[] args) { /** _java 调用kt 对象

随便推点

Matplotlib.pyplot库引入失败?_如何导入 matplotlib.pyplot 导入失败-程序员宅基地

文章浏览阅读174次。用Python的人总少不了与Matplotlib接触,可是我们在引入时Python少不了报错。此时,我们就需要在错误中寻找线索。_如何导入 matplotlib.pyplot 导入失败

uni-app,uni-table表格操作_uniapp table-程序员宅基地

文章浏览阅读8.5k次,点赞2次,收藏11次。使用uni-ui UI框架实现表格加分页功能,uni-table 和uni-pagination 组件的使用示例加完整代码。_uniapp table

HTML5本地存储账号密码

【代码】HTML5本地存储账号密码。

vue.js知识点-transition的钩子函数应用(实例展示)_transition 钩子-程序员宅基地

文章浏览阅读1.6k次。本小结通过transition的钩子函数实现小球半场动画头条-静敏的编程秘诀-vue教程合集知识点1:入场、出厂方法beforeEnter表示动画入场之前,此时,动画尚未开始,可以在beforeEnter中设置元素开始动画之前的起始样式enter表示动画开始之后的样式,这里可是设置小球完成动画之后的,结束状态enter(el,done)el:动画钩子函数的第一个参数:el,..._transition 钩子

MyBatis 多表映射及动态语句

主要梳理mybatis多表及动态使用

Qt 多线程基础及线程使用方式-程序员宅基地

文章浏览阅读2.9w次,点赞98次,收藏777次。文章目录Qt 多线程操作2.线程类QThread3.多线程使用:方式一4.多线程使用:方式二5.Qt 线程池的使用Qt 多线程操作应用程序在某些情况下需要处理比较复杂的逻辑, 如果只有一个线程去处理,就会导致窗口卡顿,无法处理用户的相关操作。这种情况下就需要使用多线程,其中一个线程处理窗口事件,其他线程进行逻辑运算,多个线程各司其职,不仅可以提高用户体验还可以提升程序的执行效率。Qt中使用多线程需要注意:Qt的默认线程为窗口线程(主线程):负责窗口事件处理或窗口控件数据的更新;子线程负责后台的业_qt 多线程

推荐文章

热门文章

相关标签