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 相关文章推荐
js检测客户端不是firefox则提示下载
Apr 07 Javascript
jQuery 添加/移除CSS类实现代码
Feb 11 Javascript
多浏览器支持的右下角浮动窗口
Apr 01 Javascript
jquery对元素拖动排序示例
Jan 16 Javascript
jfreechart插件将数据展示成饼状图、柱状图和折线图
Apr 13 Javascript
JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集
Sep 28 Javascript
JS中的数组方法笔记整理
Jul 26 Javascript
全面解析标签页的切换方式
Aug 21 Javascript
Bootstrap滚动监听组件scrollspy.js使用方法详解
Jul 20 Javascript
JavaScript 五大常见函数
Mar 23 Javascript
vue指令只能输入正数并且只能输入一个小数点的方法
Jun 08 Javascript
Ajax请求超时与网络异常处理图文详解
May 23 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
ftp类(example.php)
2006/10/09 PHP
实用函数2
2007/11/08 PHP
利用PHP生成静态HTML文档的原理
2012/10/29 PHP
一个简洁的PHP可逆加密函数(分享)
2013/06/06 PHP
PHP、Nginx、Apache中禁止网页被iframe引用的方法
2020/10/01 PHP
php读取qqwry.dat ip地址定位文件的类实例代码
2016/11/15 PHP
PHP实现的微信APP支付功能示例【基于TP5框架】
2019/09/16 PHP
ModelDialog JavaScript模态对话框类代码
2011/04/17 Javascript
js页面滚动时层智能浮动定位实现(jQuery/MooTools)
2011/08/23 Javascript
将input file的选择的文件清空的两种解决方案
2013/10/21 Javascript
js/jquery去掉空格,回车,换行示例代码
2013/11/05 Javascript
jquery仿搜索自动联想功能代码
2014/05/23 Javascript
node.js中的querystring.unescape方法使用说明
2014/12/10 Javascript
js+css实现导航效果实例
2015/02/10 Javascript
JavaScript事件详细讲解
2016/06/27 Javascript
JS去除重复并统计数量的实现方法
2016/12/15 Javascript
nodejs连接mysql数据库简单封装示例-mysql模块
2017/04/10 NodeJs
JS验证全角与半角及相互转化的介绍
2017/05/18 Javascript
利用Three.js如何实现阴影效果实例代码
2017/09/26 Javascript
jQuery幻灯片插件owlcarousel参数说明中文文档
2018/02/27 jQuery
nodeJS服务器的创建和重新启动的实现方法
2018/05/12 NodeJs
Node.js 多进程处理CPU密集任务的实现
2019/05/26 Javascript
JS为什么说async/await是generator的语法糖详解
2019/07/11 Javascript
jQuery实现每日秒杀商品倒计时功能
2019/09/06 jQuery
关于Layui Table隐藏列问题
2019/09/16 Javascript
JS如何把字符串转换成json
2020/02/21 Javascript
js、jquery实现列表模糊搜索功能过程解析
2020/03/27 jQuery
解决ant Design中this.props.form.validateFields未执行的问题
2020/10/27 Javascript
python中的__slots__使用示例
2015/02/26 Python
浅析Python的web.py框架中url的设定方法
2016/07/11 Python
Python利用pandas计算多个CSV文件数据值的实例
2018/04/19 Python
python读取xlsx的方法
2018/12/25 Python
我有一个char * 型指针正巧指向一些int 型变量, 我想跳过它们。 为什么如下的代码((int *)p)++; 不行?
2013/05/09 面试题
创建学习型党组织实施方案
2014/03/29 职场文书
熟背这些句子,让您的英语口语突飞猛进(135句)
2019/09/06 职场文书
springboot+WebMagic+MyBatis爬虫框架的使用
2021/08/07 Java/Android