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 相关文章推荐
学习ExtJS accordion布局
Oct 08 Javascript
js或css文件后面跟参数的原因说明
Jan 09 Javascript
利用jQuery 实现GridView异步排序、分页的代码
Feb 06 Javascript
js实现弹出窗口、页面变成灰色并不可操作的例子分享
May 10 Javascript
JavaScript实现模仿桌面窗口的方法
Jul 18 Javascript
关于js里的this关键字的理解
Aug 17 Javascript
jQuery+css实现的蓝色水平二级导航菜单效果代码
Sep 11 Javascript
Bootstrap每天必学之按钮(Button)插件
Apr 25 Javascript
分享一个插件实现水珠自动下落效果
Jun 01 Javascript
Javascript将JSON日期格式化
Aug 23 Javascript
微信小程序访问node.js接口服务器搭建教程
Apr 25 Javascript
vue 2.0项目中如何引入element-ui详解
Sep 06 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
从零开始学YII2框架(四)扩展插件yii2-kartikgii
2014/08/20 PHP
php调用淘宝开放API实现根据卖家昵称获取卖家店铺ID的方法
2015/07/29 PHP
PHP判断上传文件类型的解决办法
2015/10/20 PHP
总结PHP中初始化空数组的最佳方法
2019/02/13 PHP
PHP如何将图片文件上传到另外一台服务器上
2019/08/26 PHP
限制复选框的最大可选数
2006/07/01 Javascript
在b/s开发中经常用到的javaScript技术
2006/08/23 Javascript
一些常用且实用的原生JavaScript函数
2010/09/08 Javascript
通过DOM脚本去设置样式信息
2010/09/19 Javascript
javascript 文本框水印/占位符(watermark/placeholder)实现方法
2012/01/15 Javascript
jQuery中 noConflict() 方法使用
2013/04/25 Javascript
javascript实现日期时间动态显示示例代码
2015/09/08 Javascript
js判断上传文件后缀名是否合法
2016/01/28 Javascript
JavaScript基于对象去除数组重复项的方法
2016/10/09 Javascript
JavaScript表单验证开发
2016/11/23 Javascript
JavaScript中数组Array方法详解
2017/02/27 Javascript
使用JS和canvas实现gif动图的停止和播放代码
2017/09/01 Javascript
解决Angular.js中使用Swiper插件不能滑动的问题
2018/02/26 Javascript
详解vue中使用微信jssdk
2019/04/19 Javascript
vue组件三大核心概念图文详解
2019/05/30 Javascript
vue-cli4.0多环境配置变量与模式详解
2020/12/30 Vue.js
[16:01]夜魇凡尔赛茶话会 第二期01:你比划我猜
2021/03/11 DOTA
Python的socket模块源码中的一些实现要点分析
2016/06/06 Python
40个你可能不知道的Python技巧附代码
2020/01/29 Python
python中的测试框架
2020/11/13 Python
HTML5拖放API实现自动生成相框功能
2020/04/07 HTML / CSS
英国助听器购物网站:Hearing Direct
2018/08/21 全球购物
Fossil德国官网:化石手表、手袋、珠宝及配件
2019/12/07 全球购物
《桂花雨》教学反思
2014/04/12 职场文书
班级文化标语
2014/06/23 职场文书
关于运动会广播稿300字
2014/10/05 职场文书
自荐信怎么写
2015/03/04 职场文书
幼儿园六一主持词
2015/06/30 职场文书
怎么用Python识别手势数字
2021/06/07 Python
JS封装cavans多种滤镜组件
2022/02/15 Javascript
PYTHON基于Pyecharts绘制常见的直角坐标系图表
2022/04/28 Python