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。这样就解决了这个问题。

vue 的反向代理的更多相关文章
- Vue Nginx反向代理配置 解决生产环境跨域
Vue本地代理举例: module.exports = { publicPath: './', devServer: { proxy: { '/api': { target: 'https://mov ...
- vue 前端反向代理后台,解决跨域问题
// 和 src 同层的 config 文件夹下的 index.js dev 里面的 // Paths assetsSubDirectory: 'static', assetsPubl ...
- Nginx配置文件的反向代理
问题描述:项目需要预览pdf,前端控件支持的格式是http://192.168.0.1/pdf/a.pdf 是这样的,然后我就想给路径配个nginx反向代理就好了,但是配置的时候出问题了. 1.正确 ...
- nginx部署vue工程和反向代理nodejs工程
前端是vue,后端是nodejs 前端打包成dist目录,后端接口是localhost:4000/api server { listen 80; #listen [::]:80; server_nam ...
- VUE线上通过nginx反向代理实现跨域
1.NGINX反向代理实现跨域 VUE代码中配置参考上一篇文章 nginx配置,红色框线内: 代码: location /list { proxy_set_header X-Real-IP $remo ...
- vue反向代理(解决跨域)
1,vue中有提供反向代理的接口,就是config/index.js中的proxyTable,我的脚手架版本是2.9.6,proxyTable配置初始为空,如下图. 2,将proxyTable配置如下 ...
- nginx反向代理部署vue项目(history模式)的方法
前言: 根据标题我们要区分出两个信息 1. history 模式部署 ( vue的路由模式如果使用history,刷新会报404错误.) 2. Nginx 做反向代理 问题1思考: vue-route ...
- 解决Vue跨域问题 : 正向代理与反向代理
你需要做一个反向代理的东西 ===> 打开你的vue项目的config文件夹下的index.js 找到以下代码 dev: { proxyTable: { '/api': { target: ...
- Server 主机屋云服务器 宝塔面板 部署nginx反向代理的vue项目
图文记录云服务器上部署需要nginx反向代理的vue项目: 一.先登录并购买云服务器,根据自己需求购买,此处不详细介绍: 二.登录后如下图,点击进入云服务器界面: 三.在云服务器界面点击管理,进入管理 ...
随机推荐
- 浏览器在线预览pdf、txt、office文件
//使用文件预览的原因是:TMD微信浏览器屏蔽掉文件下载链接,只好折中使用文件在线预览功能//要点:1.office文件用微软的插件打开 http://view.officeapps.live.com ...
- Openwrt路由器上常用的操作
换了好些固件,大体上都差不多. 只能用opkg下载安装,不能用apt-get安装. 1.tcpdump和nano是我必备的,个人觉得nano比vi好用 opkg install tcpdump opk ...
- learning java Math类
output: //取整,返回小于目标数的最大整数System.out.println(Math.floor(-1.2));// 取整,返回在于目标数的最大整数System.out.println(M ...
- Error Codes Messages查找工具介绍
当我们通过各种手段获取到一个Windows错误码后,如何获取对应的错误消息呢?有两种方法:一是用编程的手段(FormatMessage):其二是用现成的工具.第一种方法一般在我们编码的时候有用,而更多 ...
- 鼠标经过图片会移动(css3过渡,overflow:hidden)
效果图如下: 代码: <body> <div><img src="jd.jpg"></div> </body> img{ ...
- LOJ6071. 「2017 山东一轮集训 Day5」字符串 [SAM]
LOJ 思路 这种计数题显然是要先把每一个合法的串用唯一的方法表示出来.(我连这都没想到真是无可救药了) 如何唯一?容易想到把前缀尽可能多地在第一个串填掉,然后填第二个,第三个-- 如何做到这样?可以 ...
- PreTranslateMessage中有调用模态对话框的解决方法
原文:https://blog.csdn.net/guoguojune/article/details/45332511 dlg.DoModal()截住了界面消息,所以返回时原来的pMsg的内容已经更 ...
- YouTube排名第一的励志英文演讲《Dream(梦想)》
I don’t know what that dream is that you have, I don't care how disappointing it might have been as ...
- Windows下基于IIS服务的SSL服务器的配置
Windows下基于IIS服务的SSL服务器的配置 实验环境 Windows Server 2008 R1(CA) Windows Server 2008 R2(web服务器) Windows 7 x ...
- Linux/Centos下安装部署phantomjs
PhantomJS 是一个基于 WebKit 的服务器端 JavaScript API.它全面支持web而不需浏览器支持,其快速,原生支持各种Web标准: DOM 处理, CSS 选择器, JSON, ...