vue 的反向代理

情景描述:

原本的vue打包文件是放在.net core 项目的www文件夹下去发布的。这样运行没问题,但是公司领导让服务器单独部署vue,前后端要完全分离。然后这样就出问题了,有一个上传接口的地址一直不对,后来发现请求的ip竟然是vue项目的访问地址。怎么改都不对。

尝试:

直接把url拼死,可是后台会验证用户是否登录,这么写的结果会报用户未登录,其实用户已经登录,只是这个请求的请求头没有携带用户的登录信息,导致报错。

原因:

发现文件上传用的是组件vue-uploader,但是不知道为什么没有通过生产环境配置的ip地址去请求 ,本地测试因为vue有一个自带的反向代理配置,所以不会报错,但是打包的文件不支持反向代理,打包的时候,那段代码压根就不会被打包。

就是这段~~这段的意思是拦截所有的接口请求,实际请求的ip是本地的8003端口。

解决方案:

这时候需要自己手动去配置反向代理了。这里我们用的是Nginx做的反向代理。在原本监听的端口下面加一个Location,这里的配置Location /FileUpload,意思是匹配/FileUploadd的接口,如果是这个接口就反向代理到http://127.0.0.1:8003/FileUpload。这样就解决了这个问题。

原文地址:https://www.cnblogs.com/zhangjd/p/11227214.html

时间: 2024-11-02 05:29:12

vue 的反向代理的相关文章

Nginx配置文件的反向代理

问题描述:项目需要预览pdf,前端控件支持的格式是http://192.168.0.1/pdf/a.pdf  是这样的,然后我就想给路径配个nginx反向代理就好了,但是配置的时候出问题了. 1.正确的配置 location / { root /var/www; index index.html index.htm; } location /pdf { alias /root/MSPAS/ ; index input.txt ; } 2.错误的配置 因为我前面配置过一次vue的反向代理,然后我就

Vue Nginx Node PM2 反向代理 项目部署

Vue Nginx Node PM2 项目部署 个人回忆使用,不是太详细,会的人应该能懂. 服务器 阿里云购买的 ECS 有个服务器,建议买个域名,但是没有域名需要备案,比较麻烦,我的还在备案中,所以就用ip来做测试 ECS => 实例 => 安全组配置 => 配置规则 => 快速配置 打开80端口 不会的百度,一大堆 解析域名什么的,添加到解析列表里面,就好了 Node 测试项目是一个教程,前后端分离,便于测试 client node-app 两个部分 node 项目里面没啥说的

反向代理 后端处理

反向代理 # 开发环境 前端采用mockjs进行数据模拟,如切换至真实接口,可借助express配置反向代理.如拦截前缀sale的接口,可在config/index.js里配置: proxyTable: { '/sale': 'http://192.168.0.15:8432' }, 同时在main.js注释掉"import './mock/index.js';"来禁用模拟接口功能 # 生产环境 如独立前后端独立部署,面临跨域问题,可在Nginx等配置反向代理. 后端处理 1.页面UR

CORS跨域与Nginx反向代理跨域优劣对比

最近写了一些关于前后端分离项目之后,跨域相关方案的基本原理和常见误区的帖子,主要包括CORS和Nginx反向代理.这两种方案项目中都有在用,各有优缺,关于具体使用哪种方案,大家的观点也不大一致,本文主要就此展开一下,从前后端及服务器配置.安全性.移植灵活性.扩展性等方面详细对比一下两种方案的优缺,以便于后期在方案选型上对大家有所帮助. 前端配置 CORS方案:跨域时部分浏览器默认不携带cookie,因此为了携带cookie需要设置一下xmlhttprequest的withCrendetails属

【前端词典】如何向老板解释反向代理

[前端词典]如何向老板解释反向代理 前言 现在看到的这篇文章是修改后的第三个版本. 由于我家老板看过之后,对这篇文章的评价是:写的不错,语句是通顺的,排版是可以的,但反向代理是什么还是不清楚?所以我就想尝试着向非 IT 工作者解释“正向代理”和“反向代理”. 接下来我会先尝试面向大众,来解释“代理”的概念.在从专业的角度解释“正向代理”和“反向代理”. 概念实例化 在讲代理的概念之前我先讲个类比.也是我向我家老板解释的过程. 还好我反应机敏,要不然这个月的零花钱就要替我挡一刀了.可是我该怎么解释

nginx反向代理前后端分离项目(后端多台)

目前软件架构都比较流行前后端分离,前后端的分离也实现了前后端架构的分离,带来的好处 —— 整个项目的开发权重往前移,实现真正的前后端解耦,动态资源和静态资源分离,提高了性能和扩展性. 通常SpringBoot与vue 进行前后端分离,主要有两种方式: 1.打包(npm run build命令)vue项目出来的dist文件夹拷贝到springboot项目的static文件目录,部署到tomcat即可. 2.利用nginx的反向代理. 本文主要讲解第二种 首先打包前端项目到指定目录:E:\fjgh\

Kubernetes用nginx反向代理另外服务

公司利用K8S搭建测试环境,以及存在多套测试换,目前的想法是每一套测试环境使用一个出口IP.方案:1.搭建ingress2.通过搭建一个反向代理 结合实际情况,我们使用搭建一个反向代理解决此问题. 我们环境中存在以下K8S服务vipapi-mall-com #基于.netcorebillapi-mall-com #基于PHPwww-mall-com #基于PHPmobile-mall-com #基于VUE vipapi-mall-com对外的域名就是vipapi.mall.combillapi-

linux下实现nginx反向代理

正向代理架构图 反向代理架构图 反向代理服务器决定哪台服务器提供服务 Nginx实现反向代理 两个域名指向同一台nginx服务器,用户访问不同的域名显示不同的网页内容 准备两个tomcat服务器 修改8081的port *启动两个tomcat *配置域名的映射关系 *配置nginx.conf的配置文件, *保存完后重新加载配置后生效

A10应用交付(1030S)反向代理设定

A10性能极其优越,因此我们完全可以将本来使用服务器安装Apache或nginx实现的反向代理迁移到本设备中. 反向代理的意义:物理网络只有一个公网地址,把多个域名都指向这个地址(80端口),而这些域名对应一个服务器的多个应用服务器或多个服务器的多个应用服务器.这样,反向代理就实现了"分发"以及将正确的应用返回给终端. 本次将"反向代理"迁移到A10上实现,配置过程如下: 配置模式下,SLB-模板-应用-HTTP 添加一个新模板 点开"应用转换"