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项目: 一.先登录并购买云服务器,根据自己需求购买,此处不详细介绍: 二.登录后如下图,点击进入云服务器界面: 三.在云服务器界面点击管理,进入管理 ...
随机推荐
- sqoop job 实现自动增量导入
一.测试环境 1.MySQL表结构 mysql> show create table autoextend\GCREATE TABLE `autoextend` ( `id` bigint(2 ...
- 连接到 redis 服务
连接到 redis 服务 <?php //连接本地的 Redis 服务 $redis = new Redis(); $redis->connect('127.0.0.1', 6379); ...
- Alpha冲刺(1/6)
队名:無駄無駄 组长博客 作业博客(5分) 以下内容一个小组共55分,看完之后对此部分整体打分 张越洋 过去两天完成了哪些任务 如何进行团队代码的版本管理 如何使用微信云开发 如何使用管理微信开发团队 ...
- vue日常学习(2)
1.组件学习之内容分发 1.1 作用域插槽 父级 <div class="parent"> <child> <template scope=" ...
- 2019 ASP.NET / ASP.NET Core 学习路线 (有中文翻译)
1. 点击此处查看 一个了不起的.NET Core 库.工具.框架和软件的集合 2. 以下路线 适用于 ASP NET 与 ASP NET Core (建议另存为到本地, 然后再查看) 点击此处查看 ...
- PHP-FPM远程代码执行漏洞(CVE-2019-11043)
0x00 简介 在长亭科技举办的 Real World CTF 中,国外安全研究员 Andrew Danau 在解决一道 CTF 题目时发现,向目标服务器 URL 发送 %0a 符号时,服务返回异常, ...
- Bootstrap selectpicker 下拉框多选获取选中value和多选获取文本值
1.页面代码: 页面引入: bootstrap-select.min.css和 bootstrap-select.min.js. defaults-zh_CN.min.js文件,并初始化下拉选项框. ...
- 微信小程序-收货地址左滑删除
我参照了其中的部分代码,如:bindtouchstart,bindtouchmove,bindtouchend事件多数组中偏移值的更改, 在结合微信 movable-area 和 movable-vi ...
- windows powershell学习
PowerShell,从名字可以知道,他首先是一个shell,shell的意思就是和Linux的bash等一样.和原来的cmd一样就是在里边敲命令(可执行文件)使用: 而Power就意味他是一个功能强 ...
- Kettle建立数据库链接报错-'MS SQL Server' driver (jar file) is installed. kettle的bug,对于12.2而言
1.链接sql server数据库报错 错误连接数据库 [My_vm_win_sql] : org.pentaho.di.core.exception.KettleDatabaseException: ...