VueCli4项目配置反向代理proxy的方法步骤


Posted in Javascript onMay 17, 2020

Vue Cli4创建项目之后,没有配置vue.config.js,如果直接发起axios请求,可能会引起跨域问题.

以豆瓣电影首页的最近热门 为例:

axios({
  method: "get",
  url: "https://movie.douban.com/j/search_subjects",
  params: {
  type: "movie",
  tag: "热门",
  page_limit: 50,
  page_start: 0
  }
 }).then(res => {
  console.log(res.data);
 });

如果直接发起请求必然会引起跨域错误,只需要在项目根目录手动创建vue.config.js文件:

module.exports = {
 devServer: {
 proxy: {
  "/j": {
  target: "https://movie.douban.com",
  changeOrigin: true
  }
 }
 }
};

然后修改axios请求的url地址:

url:"/j/search_subjects"

最后 重启该项目 重启该项目 重启该项目 即可

到此这篇关于VueCli4项目配置反向代理proxy的方法步骤的文章就介绍到这了,更多相关VueCli4反向代理proxy内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
Javascript:为input设置readOnly属性(示例讲解)
Dec 25 Javascript
Javascript学习笔记之 对象篇(一) : 对象的使用和属性
Jun 24 Javascript
javascript数据结构与算法之检索算法
Apr 04 Javascript
简介JavaScript中getUTCMonth()方法的使用
Jun 10 Javascript
JavaScript数组去重的3种方法和代码实例
Jul 01 Javascript
使用OpenLayers3 添加地图鼠标右键菜单
Dec 29 Javascript
jQuery自适应轮播图插件Swiper用法示例
Aug 24 Javascript
JavaScript禁用右键单击优缺点分析
Jan 20 Javascript
微信小程序保存多张图片的实现方法
Mar 05 Javascript
Vue实现表格批量审核功能实例代码
May 28 Javascript
基于JavaScript实现猜数字游戏代码实例
Jul 30 Javascript
vue中使用echarts的示例
Jan 03 Vue.js
JavaScript链式调用原理与实现方法详解
May 16 #Javascript
JavaScript设计模式---单例模式详解【四种基本形式】
May 16 #Javascript
JavaScript接口实现方法实例分析
May 16 #Javascript
JavaScript 类的封装操作示例详解
May 16 #Javascript
jquery+css3实现的经典弹出层效果示例
May 16 #jQuery
js抽奖转盘实现方法分析
May 16 #Javascript
JSONP 的原理、理解 与 实例分析
May 16 #Javascript
You might like
PHP 和 COM
2006/10/09 PHP
表单提交错误后返回内容消失问题的解决方法(PHP网站)
2015/10/20 PHP
yii添删改查实例
2015/11/16 PHP
JQUERY复选框CHECKBOX全选,取消全选
2008/08/30 Javascript
理解JavaScript中的对象 推荐
2011/01/09 Javascript
js如何调用qq互联api实现第三方登录
2014/03/28 Javascript
jQuery操作元素css样式的三种方法
2014/06/04 Javascript
jquery获取checkbox的值并post提交
2015/01/14 Javascript
JS+DIV+CSS实现的经典标签切换效果代码
2015/09/14 Javascript
基于jQuery实现拖拽图标到回收站并删除功能
2015/11/25 Javascript
jQuery+ajax实现文章点赞功能的方法
2015/12/31 Javascript
使用jquery的jsonp如何发起跨域请求及其原理详解
2017/08/17 jQuery
Vue使用vue-area-linkage实现地址三级联动效果的示例
2018/06/27 Javascript
利用d3.js力导布局绘制资源拓扑图实例教程
2019/01/08 Javascript
Webpack4+Babel7+ES6兼容IE8的实现
2019/04/10 Javascript
深入理解redux之compose的具体应用
2020/01/12 Javascript
vue实现微信浏览器左上角返回按钮拦截功能
2020/01/18 Javascript
layui使用及简单的三级联动实现教程
2020/12/01 Javascript
[56:41]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Newbee vs OG
2018/04/01 DOTA
python下调用pytesseract识别某网站验证码的实现方法
2016/06/06 Python
Python中operator模块的操作符使用示例总结
2016/06/28 Python
Kears+Opencv实现简单人脸识别
2019/08/28 Python
TensorFlow2.X使用图片制作简单的数据集训练模型
2020/04/08 Python
虚拟环境及venv和virtualenv的区别说明
2021/02/05 Python
HTML5 Canvas中绘制椭圆的4种方法
2015/04/24 HTML / CSS
全球知名旅游社区巴西站点:TripAdvisor巴西
2016/07/21 全球购物
PPP协议组成及简述协议协商的基本过程
2015/05/28 面试题
幼师自我鉴定范文
2013/10/01 职场文书
任课老师推荐信范文
2013/11/24 职场文书
小学新学期教师寄语
2014/01/18 职场文书
学校十一活动方案
2014/02/01 职场文书
假期安全教育广播稿
2014/10/04 职场文书
公务员处分决定书
2015/06/25 职场文书
幼儿园庆六一主持词
2015/06/30 职场文书
拥有这5个特征人,“命”都不会太差
2019/08/16 职场文书
详解CSS不定宽溢出文本适配滚动
2021/05/24 HTML / CSS