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 相关文章推荐
CSS JavaScript 实现菜单功能 改进版
Dec 09 Javascript
javascript 的Document属性和方法集合
Jan 25 Javascript
Jquery中删除元素的实现代码
Dec 29 Javascript
Firefox中beforeunload事件的实现缺陷浅析
May 03 Javascript
jQuery实现炫酷的鼠标轨迹特效
Feb 01 Javascript
JS锚点的设置与使用方法
Sep 05 Javascript
JS正则表达式验证账号、手机号、电话和邮箱是否合法
Mar 08 Javascript
浅谈ng-zorro使用心得
Dec 03 Javascript
layui使用button按钮 点击出现弹层 弹层中加载表单的实例
Sep 04 Javascript
关于layui 实现点击按钮添加一行(方法渲染创建的table)
Sep 29 Javascript
Vue实现验证码功能
Dec 03 Javascript
微信小程序实现发微博功能的示例代码
Jun 24 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
php实例分享之二维数组排序
2014/05/15 PHP
php 的反射详解及示例代码
2016/08/25 PHP
PHP7 windows支持
2021/03/09 PHP
网络图片延迟加载实现代码 超越jquery控件
2010/03/27 Javascript
DWZ table的原生分页浅谈
2013/03/01 Javascript
jQuery学习笔记之总体架构
2014/06/03 Javascript
Javascript学习笔记之 对象篇(三) : hasOwnProperty
2014/06/24 Javascript
禁止按回车键提交表单的方法
2015/06/11 Javascript
浅谈Nodejs观察者模式
2015/10/13 NodeJs
jQuery Password Validation密码验证
2016/12/30 Javascript
javascript判断元素存在和判断元素存在于实时的dom中的方法
2017/01/17 Javascript
详解jquery插件jquery.viewport.js学习使用方法
2017/09/08 jQuery
anime.js 实现带有描边动画效果的复选框(推荐)
2017/12/24 Javascript
vue 每次渲染完页面后div的滚动条保持在最底部的方法
2018/03/17 Javascript
自定义javascript验证框架示例【附源码下载】
2019/05/31 Javascript
Vue.js实现tab切换效果
2019/07/24 Javascript
uni-app如何实现增量更新功能
2020/01/03 Javascript
JS继承定义与使用方法简单示例
2020/02/19 Javascript
[01:04]DOTA2:伟大的Roshan雕塑震撼来临
2015/01/30 DOTA
[50:48]LGD vs CHAOS 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python实现异步回调机制代码分享
2014/01/10 Python
深入分析python数据挖掘 Json结构分析
2018/04/21 Python
django自带的server 让外网主机访问方法
2018/05/14 Python
python3.x提取中文的正则表达式示例代码
2019/07/23 Python
python3.7实现云之讯、聚合短信平台的短信发送功能
2019/09/26 Python
200行python代码实现贪吃蛇游戏
2020/04/24 Python
关于解决iframe标签嵌套问题的解决方法
2020/03/04 HTML / CSS
学习党课思想汇报
2013/12/29 职场文书
《小猫刮胡子》教学反思
2014/02/21 职场文书
品质管理部岗位职责范文
2014/03/01 职场文书
8和9的加减法教学反思
2014/05/01 职场文书
精神文明建设先进工作者事迹材料
2014/05/02 职场文书
《微笑着面对生活》优秀演讲稿范文
2014/09/23 职场文书
民用住房租房协议书
2014/10/29 职场文书
追讨欠款律师函
2015/06/24 职场文书
JavaScript实现简单的音乐播放器
2022/08/14 Javascript