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 相关文章推荐
传智播客学习之java 反射
Nov 22 Javascript
jquery提示 "object expected"的解决方法
Dec 13 Javascript
jQuery下通过replace字符串替换实现大小图片切换
May 22 Javascript
jquery parent和parents的区别分析
Oct 02 Javascript
cookie中的path与domain属性详解
Dec 18 Javascript
node.js使用nodemailer发送邮件实例
Mar 10 Javascript
jquery获取复选框被选中的值
Mar 22 Javascript
Javascript仿新浪游戏频道鼠标悬停显示子菜单效果
Aug 21 Javascript
JavaScript中的this,call,apply使用及区别详解
Jan 29 Javascript
AngularJS路由实现页面跳转实例
Mar 03 Javascript
vue.js的手脚架vue-cli项目搭建的步骤
Aug 30 Javascript
vue 指定组件缓存实例详解
Apr 01 Javascript
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 数学运算验证码实现代码
2009/10/11 PHP
phpMyAdmin 链接表的附加功能尚未激活的问题
2010/08/01 PHP
php 获取百度的热词数据的代码
2012/02/18 PHP
PHP安装GeoIP扩展根据IP获取地理位置及计算距离的方法
2016/07/01 PHP
php将服务端的文件读出来显示在web页面实例
2016/10/31 PHP
CI框架常用函数封装实例
2016/11/21 PHP
php判断是否连接上网络的方法实例详解
2016/12/14 PHP
浅析php如何实现爬取数据原理
2018/09/27 PHP
基于jQuery的弹出消息插件 DivAlert之旅(一)
2010/04/01 Javascript
javascript动画对象支持加速、减速、缓入、缓出的实现代码
2012/09/30 Javascript
Javascript浅谈之this
2013/12/17 Javascript
jQuery实现简洁的轮播图效果实例
2016/09/07 Javascript
利用js将ajax获取到的后台数据动态加载至网页中的方法
2018/08/08 Javascript
vue使用rem实现 移动端屏幕适配
2018/09/26 Javascript
关于vue组件事件属性穿透详解
2019/10/28 Javascript
JS实现音量控制拖动
2020/01/15 Javascript
element中el-container容器与div布局区分详解
2020/05/13 Javascript
vue实现按钮切换图片
2021/01/20 Vue.js
[01:32]DOTA2 2015国际邀请赛中国区预选赛第四日战报
2015/05/29 DOTA
[48:28]完美世界DOTA2联赛循环赛FTD vs Magma第二场 10月30日
2020/10/31 DOTA
zookeeper python接口实例详解
2018/01/18 Python
在PyCharm中三步完成PyPy解释器的配置的方法
2018/10/29 Python
Python rstrip()方法实例详解
2018/11/11 Python
使用python 打开文件并做匹配处理的实例
2019/01/02 Python
Python中Numpy ndarray的使用详解
2019/05/24 Python
Python爬虫 scrapy框架爬取某招聘网存入mongodb解析
2019/07/31 Python
python PyAUtoGUI库实现自动化控制鼠标键盘
2020/09/09 Python
python xlsxwriter模块的使用
2020/12/24 Python
人力资源管理专业毕业生自我评价
2013/09/21 职场文书
在校生党员自我评价
2013/09/25 职场文书
祖国在我心中演讲稿600字
2014/05/04 职场文书
离婚协议书范本(2016最新版)
2016/03/18 职场文书
十一月早安语录:把心放轻,人生就是一朵自在的云
2019/11/04 职场文书
《风不能把阳光打败》读后感3篇
2020/01/06 职场文书
浅谈如何提高PHP代码质量之单元测试
2021/05/28 PHP
分析Netty直接内存原理及应用
2021/06/14 Java/Android