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 相关文章推荐
JavaScript中的闭包原理分析
Mar 08 Javascript
jquery子元素过滤选择器使用示例
Jun 24 Javascript
Node.js的包详细介绍
Jan 14 Javascript
JavaScript实现自动消除按钮功能的方法
Aug 05 Javascript
jquery.cookie实现的客户端购物车操作实例
Dec 24 Javascript
第一次接触神奇的Bootstrap导航条
Aug 09 Javascript
详细解读Jquery各Ajax函数($.get(),$.post(),$.ajax(),$.getJSON())
Aug 15 Javascript
jQuery日程管理控件glDatePicker用法详解
Mar 29 jQuery
React 子组件向父组件传值的方法
Jul 24 Javascript
详解基于vue-cli优化的webpack配置
Nov 06 Javascript
浅谈es6 javascript的map数据结构
Dec 14 Javascript
详解微信小程序(Taro)手动埋点和自动埋点的实现
Mar 02 Javascript
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
解析关于java,php以及html的所有文件编码与乱码的处理方法汇总
2013/06/24 PHP
Yii学习总结之数据访问对象 (DAO)
2015/02/22 PHP
PHP+RabbitMQ实现消息队列的完整代码
2019/03/20 PHP
关于JavaScript的一些看法
2009/05/27 Javascript
JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的区别和应用场景简述
2010/04/15 Javascript
JS操作图片(增,删,改) 例子
2013/04/17 Javascript
自定义函数实现IE7与IE8不兼容js中trim函数的问题
2015/02/03 Javascript
4种JavaScript实现简单tab选项卡切换的方法
2016/01/06 Javascript
利用jquery制作滚动到指定位置触发动画
2016/03/26 Javascript
原生node.js案例--前后台交互
2017/02/20 Javascript
Javascript 之封装(Package)
2018/09/14 Javascript
微信小程序中遇到的iOS兼容性问题小结
2018/11/14 Javascript
微信小程序实现单列下拉菜单效果
2019/04/25 Javascript
Vue的生命周期操作示例
2019/09/17 Javascript
js实现购物车商品数量加减
2020/09/21 Javascript
[36:16]完美世界DOTA2联赛PWL S3 access vs Rebirth 第一场 12.19
2020/12/24 DOTA
python 正则式使用心得
2009/05/07 Python
python通过urllib2爬网页上种子下载示例
2014/02/24 Python
python多重继承新算法C3介绍
2014/09/28 Python
python机器学习实战之最近邻kNN分类器
2017/12/20 Python
python opencv3实现人脸识别(windows)
2018/05/25 Python
详解Python函数式编程—高阶函数
2019/03/29 Python
Python学习之time模块的基本使用
2021/01/17 Python
Expedia泰国:预订机票、酒店和旅游包(航班+酒店)
2016/09/27 全球购物
BLACKMORES澳洲官网:澳大利亚排名第一的保健品牌
2018/09/27 全球购物
小米旗下精品生活电商平台:小米有品
2018/12/18 全球购物
美国中西部家用医疗设备商店:Med Mart(轮椅、踏板车、升降机等)
2019/04/26 全球购物
Java工程师面试集锦之Spring框架
2013/06/16 面试题
Boolean b = new Boolean(“abcde”); 会编译错误码
2013/11/27 面试题
护理专业毕业生自荐信范文
2014/01/05 职场文书
《识字五》教学反思
2014/03/01 职场文书
商场租赁意向书
2014/07/30 职场文书
小学生我的梦想演讲稿
2014/08/21 职场文书
专题组织生活会发言材料
2014/10/17 职场文书
同学聚会通知短信
2015/04/20 职场文书
使用Ajax实现进度条的绘制
2022/04/07 Javascript