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的最佳方法分享
Oct 21 Javascript
js中eval详解
Mar 30 Javascript
几种设置表单元素中文本输入框不可编辑的方法总结
Nov 25 Javascript
如何用js 实现依赖注入的思想,后端框架思想搬到前端来
Aug 03 Javascript
cocos2dx骨骼动画Armature源码剖析(一)
Sep 08 Javascript
ionic实现带字的toggle滑动组件
Aug 27 Javascript
JS定时器实现数值从0到10来回变化
Dec 09 Javascript
Vue2.X 通过AJAX动态更新数据
Jul 17 Javascript
angular6根据environments配置文件更改开发所需要的环境的方法
Mar 06 Javascript
3分钟了解vue数据劫持的原理实现
May 01 Javascript
layui 动态设置checbox 选中状态的例子
Sep 02 Javascript
vue 使用post/get 下载导出文件操作
Aug 07 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自动选择 连接本地还是远程数据库
2010/12/02 PHP
PHP命名空间与自动加载机制的基础介绍
2019/08/25 PHP
jquery isType() 类型判断代码
2011/02/14 Javascript
jQuery结合ajax实现动态加载文本内容
2015/05/19 Javascript
jquery操作select元素和option的实例代码
2016/02/03 Javascript
Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作)
2016/07/14 Javascript
原生js仿jquery一些常用方法(必看篇)
2016/09/20 Javascript
JavaScript事件用法浅析
2016/10/31 Javascript
jQuery设置和获取select、checkbox、radio的选中值方法
2017/01/01 Javascript
Bootstrap响应式导航由768px变成992px的实现代码
2017/06/15 Javascript
使用ef6创建oracle数据库的实体模型遇到的问题及解决方案
2017/11/09 Javascript
arcgis for js栅格图层叠加(Raster Layer)问题
2017/11/22 Javascript
封装Vue Element的table表格组件的示例详解
2020/08/19 Javascript
浅析 Vue 3.0 的组装式 API(一)
2020/08/31 Javascript
[10:21]2018DOTA2国际邀请赛寻真——Winstrike
2018/08/11 DOTA
利用Python的Django框架中的ORM建立查询API
2015/04/20 Python
图文讲解选择排序算法的原理及在Python中的实现
2016/05/04 Python
Python字符串拼接的几种方法整理
2017/08/02 Python
对python中的xlsxwriter库简单分析
2018/05/04 Python
对dataframe数据之间求补集的实例详解
2019/01/30 Python
Django框架文件上传与自定义图片上传路径、上传文件名操作分析
2019/05/10 Python
浅谈Python中(&,|)和(and,or)之间的区别
2019/08/07 Python
python分布式编程实现过程解析
2019/11/08 Python
python解析命令行参数的三种方法详解
2019/11/29 Python
加拿大鞋子连锁店:Town Shoes
2016/09/26 全球购物
Expedia丹麦:全球领先的旅游网站
2018/03/18 全球购物
夏洛特和乔治婴儿和儿童时装精品店:Charlotte and George
2018/06/06 全球购物
大学学习生活感言
2014/01/18 职场文书
生日宴会策划方案
2014/06/03 职场文书
相亲大会策划方案
2014/06/05 职场文书
世博会口号
2014/06/20 职场文书
2014小学数学教师个人工作总结
2014/12/18 职场文书
中学生思想品德评语
2014/12/31 职场文书
2015年教师业务工作总结
2015/05/26 职场文书
2016年秋季运动会广播稿
2015/12/21 职场文书
MySQL的存储过程和相关函数
2022/04/26 MySQL