说明:这里的vue代理是指用vue静态服务器做代理。使用的是 http-proxy-middleware 这个模块(这个模块相当于是node.js的一个插件)。

版本: vue-cli 3.0以上

修改文件位置:根目录下的vue.config.js

代码:

devServer: {
proxy: {
'/api': {
target: 'http://192.168.123.123:8080', // 后台接口地址
ws: true, //如果要代理 websockets,配置这个参数
secure: false, // 如果是https接口,需要配置这个参数
changeOrigin: true, //是否跨域
pathRewrite:{ // 重写路径
'^/api':''
}
}
}
}

vue项目里,我的所有接口的地址都是/api开头的,所以前面用 ‘/api’,如果我的开头是/pc开头,但是接口没有/pc这时候会用到路径重写,下面有介绍。
当node服务器 遇到 以 ‘/api’ 开头的请求,就会把 target 字段里的值加上,那么请求地址就为变成了http://192.168.123.123:8080/api/xxxx/xxx

pathRewrite 表示的意思是 把/api 替换为 空,那么请求地址就为 http://192.168.123.123:8080/xxxx/xxx(如果是/pc,就把pc替换为空)

注意2:在本地查看地址的时候,地址不会更改,还是http://localhost:8090/api/xxx/xxxxx,看起来/api和target的地址没有替换,但实际已经替换了。

刚接触的对pathRewrite不是很懂,把他的中文意思理解为重新写了/api的路径,调用时就不加/api了,这个理解是错误的,他其实就是吧/api替换为空,如果还报错就查一查看看是不是提交的方法问题,比如 get 和 post 没区分开。

Vue 配置代理的更多相关文章

  1. react和vue配置本地代理

    React 在react中配置开发环境下的本地代理相对比较简单,直接在package.json文件中修改即可. 但是这样做有其局限性,如果开发中代理多个接口的时候将无法满足需求,我们需要的是下面这种的 ...

  2. VUE前端项目配置代理解决跨域问题

    VUE前端项目配置代理解决跨域问题 问题如下,经常在本地调试接口出现这种问题 解决方式1:Chrome 的扩展插件 以前使用Chrome 的扩展插件,但是有时候还是会出现莫名其妙的问题. 需要梯子才行 ...

  3. vue中代理实现方法

    vue中代理实现方法如下: const path = require('path'); function resolve(dir) { return path.join(__dirname, dir) ...

  4. npm配置代理

    有时候可能因为使用代理,使用npm下载node模块会报"proxy"相关的错误,error提示ECONNECT,好像是这么拼的. 解决办法 1 配置代理 npm config se ...

  5. vmWare虚拟机下ubuntu配置代理上网

    最终用上了linux,windows下用vmWare安装虚拟机,挂ubuntu 14.04,,认为非常不习惯,非常难侍候. 而且遇到的客观困难还不少,这两天着实费了不少功夫.主要是上班这里上网要配置代 ...

  6. JAVAEE——BOS物流项目08:配置代理对象远程调用crm服务、查看定区中包含的分区、查看定区关联的客户

    1 学习计划 1.定区关联客户 n 完善CRM服务中的客户查询方法 n 在BOS项目中配置代理对象远程调用crm服务 n 调整定区关联客户页面 n 实现定区关联客户 2.查看定区中包含的分区 n 页面 ...

  7. vue配置手机通过IP访问电脑开发环境

    vue配置手机通过IP访问电脑开发环境config/index.js// Various Dev Server settings host: '0.0.0.0', // can be overwrit ...

  8. vue配置手机通过IP访问,Win10让局域网内其他电脑通过IP访问网站的方法

    vue配置手机通过IP访问config/index.js// Various Dev Server settings host: '0.0.0.0', // can be overwritten by ...

  9. docker配置代理的用户名密码

    公司访问外网全部需要经过代理服务器,在使用docker的过程中,发现就算为docker配置了代理,还是会因为没有代理服务器认证,导致pull操作失败,报如下错误: Error response fro ...

随机推荐

  1. linux项目部署(非前后端分离crm)

    参考博客 参考博客2---部署过程 导论:看参考博客1 WSGI是Web服务器网关接口.它是一个规范,描述了Web服务器如何与Web应用程序通信,以及Web应用程序如何链接在一起以处理一个请求,(接收 ...

  2. CSAPP 之 AttackLab 详解

    前言 本篇博客将会介绍 CSAPP 之 AttackLab 的攻击过程,利用缓冲区溢出错误进行代码注入攻击和 ROP 攻击.实验提供了以下几个文件,其中 ctarget 可执行文件用来进行代码注入攻击 ...

  3. SM3和Blake

    在此给出SM3和Blake的对比 哈希函数 哈希算法 (Hash Algorithm) 是将任意长度的数据映射为固定长度数据的算法,也称为消息摘要.一般情况下,哈希算法有两个特点, 一是原始数据的细微 ...

  4. 890. Find and Replace Pattern - LeetCode

    Question 890. Find and Replace Pattern Solution 题目大意:从字符串数组中找到类型匹配的如xyy,xxx 思路: 举例:words = ["ab ...

  5. Win10系统下怎么让局域网内其他电脑通过IP访问网站

    最近,有位win10系统用户在电脑上制作好网站后,希望能让局域网内的其他电脑通过IP直接访问自己电脑的网站,以便得到更好地测试效果.可是,该用户操作了很久都没成功.那么,我们如何配置win10电脑的I ...

  6. quasar + uni-app混合打包APP

    写几个关键点,作为备忘录. 和所有框架一样,现在本地run build quasar的cli是 quasar build 然后记住打包好以后的静态文件 目录 uni-app新建一个5+App的默认模板 ...

  7. Improved Security for a Ring-Based Fully Homomorphic Encryption Scheme-2013:解读

    本文记录阅读此论文的笔记 摘要 (1)1996年,HPS三人提出一个格上的高效加密方案,叫做NTRUEncrypt,但是没有安全性证明:之后2011年,SS等人修改此方案,将其安全规约到标准格上的困难 ...

  8. php三行代码解决输入地址给出经纬度

    //获取地址经纬度坐标 public function getAddress() { $ak = 'GPIrsdfZ-UNLRP-VBBDB-V3AGK-XL5KO-5DBNY'; $address  ...

  9. 线程崩溃为什么不会导致 JVM 崩溃

    大家好,我是坤哥 网上看到一个很有意思的据说是美团的面试题:为什么线程崩溃崩溃不会导致 JVM 崩溃,这个问题我看了不少回答,但都没答到根本原因,所以决定答一答,相信大家看完肯定会有收获,本文分以下几 ...

  10. 如何删除wps在我的电脑入口中的云文档图标

    本人有强迫症,看着图标很难受,所以就找到了一种注册表删除的方法,操作如下: 呼出注册表面板, WIN+R 输入 regedit 打开注册表 找到如下路径 计算机\HKEY_CURRENT_USER\S ...