Vue使用Proxy代理后仍无法生效的解决


Posted in Javascript onNovember 13, 2020

vue.js 配置了前端代理却未能生效

记录一下最近踩得小坑:

配置完代理后请一定重新执行(重要,非常重要!)

npm run dev

若重新执行命令后,代理仍为生效,请按下方步骤进行检查:

检查index.js文件中的代理是否配置正确,示例如下:

proxyTable: {
  '/api': { //代理标识
  target: 'http://xxx.xxx.xxx',//指向的实际地址
  changeOrigin: true, // 允许跨域
  pathRewrite: {
   // 标识替换
   // 原请求地址为 /api/getData 将'/api'替换''时,
   // 代理后的请求地址为: http://xxx.xxx.xxx/getData
   // 若替换为'/other',则代理后的请求地址为 http://xxx.xxx.xxx/other/getData  
   '^/api': '' 
  }
  }
 },

检查请求路径是否正确,以上方所配置的代理为例

// 请确认原请求中是否包含代理标识符
 // 请确认接口 http://xxx.xxx.xxx/getData直接访问是否正常
 this.$axios.get('/api/getData').then((r)=>{
       console.log(r) 
    })

补充知识:vue使用proxyTable设置接口代理

1、修改config/index.js里proxyTable

proxyTable: {
  '/api': {
    target: 'http://192.168.42.182:8080',
    changeOrigin: true,
    pathRewrite: {
      '^/api': '/'
    }
  },
}

2、修改config/dev.env.js

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  API: '"/api"' // 加入这一句
})

3、设置axios的baseUrl

export default {
  get (url, params) {
    return axios({
      method: 'get',
      baseURL: process.env.API, // 修改这里
      url,
      params,
      timeout: 100000
    }).then((response) => {
       return checkStatus(response)
    }).then((res) => {
       return checkCode(res)
    })
  }
}

4、重启服务器 npm run dev就好啦~

以上这篇Vue使用Proxy代理后仍无法生效的解决就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
取得传值的函数
Oct 27 Javascript
Bookmarklet实现启动jQuery(模仿 云输入法)
Sep 15 Javascript
基于jquery库的tab新形式使用
Nov 16 Javascript
javascript 数字格式化输出的实现代码
Dec 10 Javascript
jQuery模拟黑客帝国矩阵效果实例
Jun 28 Javascript
利用JavaScript脚本实现滚屏效果的方法
Jul 07 Javascript
为何JS操作的href都是javascript:void(0);呢
Nov 12 Javascript
Angularjs中的事件广播 —全面解析$broadcast,$emit,$on
May 17 Javascript
JavaScript数组实现数据结构中的队列与堆栈
May 26 Javascript
Angular.JS中select下拉框设置value的方法
Jun 20 Javascript
Node.js实现文件上传的示例
Jun 28 Javascript
Vue项目如何引入bootstrap、elementUI、echarts
Nov 26 Vue.js
vue iview 隐藏Table组件里的某一列操作
Nov 13 #Javascript
详解Java中String JSONObject JSONArray List转换
Nov 13 #Javascript
vue print.js打印支持Echarts图表操作
Nov 13 #Javascript
vue 中使用print.js导出pdf操作
Nov 13 #Javascript
详解vue中在父组件点击按钮触发子组件的事件
Nov 13 #Javascript
Vue中nprogress页面加载进度条的方法实现
Nov 13 #Javascript
解决vue打包 npm run build-test突然不动了的问题
Nov 13 #Javascript
You might like
如何对PHP程序中的常见漏洞进行攻击(上)
2006/10/09 PHP
使用 eAccelerator加速PHP代码的目的
2007/03/16 PHP
php更新mysql后获取影响的行数发生异常解决方法
2013/03/28 PHP
IIS下PHP的三种配置方式对比
2014/11/20 PHP
详解如何实现Laravel的服务容器的方法示例
2019/04/15 PHP
javascript高亮效果的二种实现方法
2008/09/14 Javascript
基于jquery实现拆分姓名的方法(纯JS版)
2013/05/08 Javascript
jquery如何通过name名称获取当前name的value值
2013/12/20 Javascript
通过复制Table生成word和excel的javascript代码
2014/01/20 Javascript
用js格式化金额可设置保留的小数位数
2014/05/09 Javascript
JavaScript Math 对象常用方法总结
2016/04/28 Javascript
javascript深拷贝(deepClone)详解
2016/08/24 Javascript
js+html制作简单验证码
2017/02/16 Javascript
浅谈Vue父子组件和非父子组件传值问题
2017/08/22 Javascript
JS动态插入脚本和插入引用外部链接脚本的方法
2018/05/21 Javascript
详解如何用VUE写一个多用模态框组件模版
2018/09/27 Javascript
angular6 填坑之sdk的方法
2018/12/27 Javascript
es6 for循环中let和var区别详解
2020/01/12 Javascript
vue移动端弹起蒙层滑动禁止底部滑动操作
2020/07/22 Javascript
[06:10]6.81新信使新套装!给你一个炫酷的DOTA2
2014/05/06 DOTA
[00:43]魔廷新尊——痛苦女王至宝捆绑包
2020/06/12 DOTA
跟老齐学Python之画圈还不简单吗?
2014/09/20 Python
Python中使用MELIAE分析程序内存占用实例
2015/02/18 Python
对于Python的Django框架部署的一些建议
2015/04/09 Python
初步介绍Python中的pydoc模块和distutils模块
2015/04/13 Python
浅谈Python peewee 使用经验
2017/10/20 Python
使用python中的in ,not in来检查元素是不是在列表中的方法
2018/07/06 Python
python实现Excel文件转换为TXT文件
2019/04/28 Python
python实现图像高斯金字塔的示例代码
2020/12/11 Python
璀璨的珍珠、密钉和个性化珠宝:Lily & Roo
2021/01/21 全球购物
简单说下OSPF的操作过程
2014/08/13 面试题
职务任命书范本
2014/06/05 职场文书
委托书怎么写
2014/07/31 职场文书
防暑降温通知书
2015/04/27 职场文书
《初涉尘世》读后感3篇
2020/01/10 职场文书
zabbix如何添加监控主机和自定义监控项
2022/08/14 Servers