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 相关文章推荐
原始XMLHttpRequest方法详情回顾
Nov 28 Javascript
jQuery插件zepto.js简单实现tab切换
Jun 16 Javascript
浅谈JavaScript中指针和地址
Jul 26 Javascript
JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)
Jun 24 Javascript
JS实现禁止高频率连续点击的方法【基于ES6语法】
Apr 25 Javascript
用js屏蔽被http劫持的浮动广告实现方法
Aug 10 Javascript
获取本机IP地址的实例(JavaScript / Node.js)
Nov 24 Javascript
在knockoutjs 上自己实现的flux(实例讲解)
Dec 18 Javascript
浅谈Webpack4 Tree Shaking 终极优化指南
Nov 18 Javascript
js、jquery实现列表模糊搜索功能过程解析
Mar 27 jQuery
基于ant design日期控件使用_仅月份的操作
Oct 27 Javascript
一分钟学会JavaScript中的try-catch
Dec 14 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
Zend framework处理一个http请求的流程分析
2010/02/08 PHP
PHP IDE PHPStorm配置支持友好Laravel代码提示方法
2015/05/12 PHP
php array_walk 对数组中的每个元素应用用户自定义函数详解
2016/11/18 PHP
php封装db类连接sqlite3数据库的方法实例
2017/12/19 PHP
kmock javascript 单元测试代码
2011/02/06 Javascript
js 静态动态成员 and 信息的封装和隐藏
2011/05/29 Javascript
JavaScript之引用类型介绍
2012/08/10 Javascript
返回上一页并自动刷新的JavaScript代码
2014/02/19 Javascript
js实现商品抛物线加入购物车特效
2020/11/18 Javascript
最实用的jQuery分页插件
2016/10/09 Javascript
Angular和百度地图的结合实例代码
2016/10/19 Javascript
Javascript中document.referrer隐藏来源的方法
2017/01/16 Javascript
javascript 中select框触发事件过程的分析
2017/08/01 Javascript
vue2.x select2 指令封装详解
2017/10/12 Javascript
HTML5+JS+JQuery+ECharts实现异步加载问题
2017/12/16 jQuery
JS运动特效之同时运动实现方法分析
2018/01/24 Javascript
JS实现用特殊符号替换字符串的中间部分区域的实例代码
2018/07/24 Javascript
详解微信小程序-扫一扫 wx.scanCode() 扫码大变身
2019/04/30 Javascript
基于nodejs的微信JS-SDK简单应用实现
2019/05/21 NodeJs
微信小程序 简易计算器实现代码实例
2019/09/02 Javascript
vue elementUI 表单校验的实现代码(多层嵌套)
2019/11/06 Javascript
JSONP解决JS跨域问题的实现
2020/05/25 Javascript
Python中对元组和列表按条件进行排序的方法示例
2015/11/10 Python
windows下Virtualenvwrapper安装教程
2017/12/13 Python
Python3使用pandas模块读写excel操作示例
2018/07/03 Python
python 自定义异常和异常捕捉的方法
2018/10/18 Python
值得收藏的10道python 面试题
2019/04/15 Python
html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因
2013/01/09 HTML / CSS
html5 Canvas画图教程(6)—canvas里画曲线之arcTo方法
2013/01/09 HTML / CSS
Chantelle仙黛尔内衣美国官网:法国第一品牌内衣
2018/07/26 全球购物
好邻里事迹材料
2014/01/16 职场文书
物业保安员岗位职责
2014/03/14 职场文书
优秀会计求职信
2014/07/04 职场文书
教师个人工作总结范文2014
2014/11/10 职场文书
幼儿园中班班级总结
2015/08/10 职场文书
2015年中秋放假通知范文
2015/08/18 职场文书