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 相关文章推荐
一个js实现的所谓的滑动门
May 23 Javascript
IE6 弹出Iframe层中的文本框“经常”无法获得输入焦点
Dec 27 Javascript
JS 类型转换常见方法小结
May 31 Javascript
全面理解面向对象的 JavaScript(来自ibm)
Nov 10 Javascript
JS关键字球状旋转效果的实例代码
Nov 29 Javascript
jQuery简单实现隐藏以及显示特效
Feb 26 Javascript
使用命令对象代替switch语句的写法示例
Feb 28 Javascript
AngularJS教程之简单应用程序示例
Aug 16 Javascript
Linux系统中利用node.js提取Word(doc/docx)及PDF文本的内容
Jun 17 Javascript
使用webpack4编译并压缩ES6代码的方法示例
Apr 24 Javascript
js时间戳转yyyy-MM-dd HH-mm-ss工具类详解
Apr 30 Javascript
Vue3新特性之在Composition API中使用CSS Modules
Jul 13 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
自制短波长线天线频率预选器 - 成功消除B2K之流的镜像
2021/03/02 无线电
Windows下XDebug 手工配置与使用说明
2010/07/11 PHP
php 求质素(素数) 的实现代码
2011/04/12 PHP
浅析php header 跳转
2013/06/17 PHP
PHP批量删除jQuery操作
2017/07/23 PHP
php数据序列化测试实例详解
2017/08/12 PHP
PHP切割整数工具类似微信红包金额分配的思路详解
2019/09/18 PHP
javascript getElementsByClassName函数
2010/04/01 Javascript
JQuery做的一个简单的点灯游戏分享
2014/07/16 Javascript
JavaScript检查某个function是否是原生代码的方法
2014/08/20 Javascript
javascript生成随机数方法汇总
2015/11/12 Javascript
值得分享和收藏的xmlplus组件学习教程
2017/05/05 Javascript
JavaScript转换数据库DateTime字段类型方法
2017/06/27 Javascript
BootStrap模态框不垂直居中的解决方法
2017/10/19 Javascript
JavaScript实现数值自动增加动画
2017/12/28 Javascript
对angularJs中ng-style动态改变样式的实例讲解
2018/09/30 Javascript
bootstrap-table实现表头固定以及列固定的方法示例
2019/03/07 Javascript
多个vue子路由文件自动化合并的方法
2019/09/03 Javascript
使用p5.js实现动态GIF图片临摹重现
2019/10/23 Javascript
vue data引入本地图片的两种方式小结
2019/11/13 Javascript
python通过装饰器检查函数参数数据类型的方法
2015/03/13 Python
在Python程序中操作文件之flush()方法的使用教程
2015/05/24 Python
如何高效使用Python字典的方法详解
2017/08/31 Python
Windows 7下Python Web环境搭建图文教程
2018/03/20 Python
pytorch torch.expand和torch.repeat的区别详解
2019/11/05 Python
如何基于python测量代码运行时间
2019/12/25 Python
Python+Dlib+Opencv实现人脸采集并表情判别功能的代码
2020/07/01 Python
python 使用递归的方式实现语义图片分割功能
2020/07/16 Python
详解Python3.8+PyQt5+pyqt5-tools+Pycharm配置详细教程
2020/11/02 Python
阿迪达斯芬兰官方网站:adidas芬兰
2017/01/30 全球购物
彪马加拿大官网:PUMA加拿大
2018/10/04 全球购物
建筑专业自我鉴定
2013/10/22 职场文书
2015年宣传部部长竞选演讲稿
2014/11/28 职场文书
图书馆义工感想
2015/08/07 职场文书
个人工作总结(管理人员)范文
2019/08/13 职场文书
Spring Boot 排除某个类加载注入IOC的操作
2021/08/02 Java/Android