vue-cli开发环境实现跨域请求的方法


Posted in Javascript onApril 07, 2018

前端开发时,请求后台接口经常需要跨域,vue-cli实现跨域请求只需要打开config/index.js,修改如下内容即可。

//例如要请求的接口url为http://172.3.2.1:8000/look/1

module.exports = {
  dev:{
    proxyTable:{
      '/api':{
        target: 'http://172.3.2.1:8000',
        changeOrigin: true,
        pathRewrite: {
         '^/api': ''
        }
      }
    }
  }
}

 这时在你想请求接口的url处,输入/api/look/1 即可实现跨域请求。

这时如果打开F12会发现请求的url是localhost:8080/api/look/1,这其实是虚拟从本地请求数据,这样就不会有跨域的问题产生了。

一般情况下上面的方法是没有问题的,要是上面的方法行不通,可以试试这样写:

//例如要请求的接口url为http://172.3.2.1:8000/look/1

module.exports = {
  dev:{
    proxyTable:{
      '/look':{
        target: 'http://172.3.2.1:8000',
        changeOrigin: true,
        pathRewrite: {
         '^/look': '/look'
        }
      }
    }
  }
}

这时在你想请求接口的url处,输入/look/1 即可实现跨域请求。

详情:https://vuejs-templates.github.io/webpack/proxy.html

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 选择器、DOM操作、事件、动画
Nov 25 Javascript
firefox下jQuery UI Autocomplete 1.8.*中文输入修正方法
Sep 19 Javascript
js 获取radio按钮值的实例
Aug 17 Javascript
Javascript脚本实现静态网页加密实例代码
Nov 05 Javascript
影响jQuery使用的14个方面
Sep 01 Javascript
JS实现Select的option上下移动的方法
Mar 01 Javascript
Bootstrap作品展示站点实战项目2
Oct 14 Javascript
JavaScript中清空数组的方法总结
Dec 02 Javascript
详解用webpack2.0构建vue2.0超详细精简版
Apr 05 Javascript
带你快速理解javascript中的事件模型
Aug 14 Javascript
深入剖析Node.js cluster模块
May 23 Javascript
JavaScript中clientWidth,offsetWidth,scrollWidth的区别
Jan 25 Javascript
Angular5给组件本身的标签添加样式class的方法
Apr 07 #Javascript
Vue实现内部组件轮播切换效果的示例代码
Apr 07 #Javascript
Javascript实现运算符重载详解
Apr 07 #Javascript
Vue中使用Sortable的示例代码
Apr 07 #Javascript
JavaScript实现简单动态进度条效果
Apr 06 #Javascript
js+css实现打字效果
Jun 24 #Javascript
简单介绍react redux的中间件的使用
Apr 06 #Javascript
You might like
通过JavaScript或PHP检测Android设备的代码
2011/03/09 PHP
如何判断php数组的维度
2013/06/10 PHP
解析PHP跨站刷票的实现代码
2013/06/18 PHP
laravel 5 实现模板主题功能(续)
2015/03/02 PHP
PHP实现mysqli批量执行多条语句的方法示例
2017/07/22 PHP
WEB页子窗口(showModalDialog和showModelessDialog)使用说明
2009/10/25 Javascript
js 对联广告、漂浮广告封装类(IE,FF,Opera,Safari,Chrome
2009/11/26 Javascript
javascript算法学习(直接插入排序)
2011/04/12 Javascript
js判断客户端是iOS还是Android等移动终端的方法
2013/12/11 Javascript
理解 JavaScript Scoping & Hoisting(二)
2015/11/18 Javascript
解决angular的post请求后SpringMVC后台接收不到参数值问题的方法
2015/12/10 Javascript
javascript实现拖放效果
2015/12/16 Javascript
JavaScript+Java实现HTML页面转为PDF文件保存的方法
2016/05/30 Javascript
谈谈对JavaScript原生拖放的深入理解
2016/09/20 Javascript
jQuery阻止移动端遮罩层后页面滚动
2017/03/15 Javascript
JQuery实现table中tr上移下移的示例(超简单)
2018/01/08 jQuery
微信小程序实现图片滚动效果示例
2018/12/05 Javascript
详解Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)
2019/04/20 Javascript
基于vue实现探探滑动组件功能
2020/05/29 Javascript
[55:54]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python单链表实现代码实例
2013/11/21 Python
python下实现二叉堆以及堆排序的示例
2017/09/29 Python
Python wxPython库使用wx.ListBox创建列表框示例
2018/09/03 Python
使用selenium模拟登录解决滑块验证问题的实现
2019/05/10 Python
Python实现密钥密码(加解密)实例详解
2020/04/26 Python
Django怎么在admin后台注册数据库表
2020/11/14 Python
西班牙最大的婴儿用品网上商店:Bebitus
2019/05/30 全球购物
解释下面关于J2EE的名词
2013/11/15 面试题
岗位职责范本
2013/11/23 职场文书
大学生入党思想汇报
2014/01/14 职场文书
企业文化演讲稿
2014/05/20 职场文书
保护环境标语
2014/06/09 职场文书
党员自我剖析材料范文
2014/10/06 职场文书
学习十八届四中全会精神思想汇报
2014/10/23 职场文书
2014年财务个人工作总结
2014/12/08 职场文书
小学生成绩单评语
2014/12/31 职场文书