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 相关文章推荐
JavaScript的目的分析
Jan 05 Javascript
javascript编写贪吃蛇游戏
Jul 07 Javascript
JavaScript对象数组排序实例方法浅析
Jun 15 Javascript
JS正则匹配URL网址的方法(可匹配www,http开头的一切网址)
Jan 06 Javascript
BootStrap CSS全局样式和表格样式源码解析
Jan 20 Javascript
js运算符的一些特殊用法
Jul 29 Javascript
JavaScript引用类型RegExp基本用法详解
Aug 09 Javascript
微信小程序导航栏滑动定位功能示例(实现CSS3的positionsticky效果)
Jan 24 Javascript
jquery实现动态创建form并提交的方法示例
May 27 jQuery
js简单实现自动生成表格功能示例
Jun 02 Javascript
jQuery+ThinkPHP实现图片上传
Jul 23 jQuery
浅谈TypeScript 索引签名的理解
Oct 16 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
PHP array操作10个小技巧分享
2011/06/23 PHP
安装apache2.2.22配置php5.4(具体操作步骤)
2013/06/26 PHP
PHP实现获取FLV文件的时间
2015/02/10 PHP
php抛出异常与捕捉特定类型的异常详解
2016/10/26 PHP
Windows 下安装 swoole 图文教程(php)
2017/06/05 PHP
PHP迭代器和生成器用法实例分析
2019/09/28 PHP
对象无length属性时IE6/IE7中无法将其转换成伪数组(ArrayLike)
2011/07/31 Javascript
用JQuery模仿淘宝的图片放大镜显示效果
2011/09/15 Javascript
IE的fireEvent方法概述及应用
2013/02/22 Javascript
caller和callee的区别介绍及演示结果
2013/03/10 Javascript
jQuery+jRange实现滑动选取数值范围特效
2015/03/14 Javascript
cocos2dx骨骼动画Armature源码剖析(三)
2015/09/08 Javascript
jQuery模仿单选按钮选中效果
2016/06/24 Javascript
javascript 动态样式添加的简单实现
2016/10/11 Javascript
JavaScript模块化之使用requireJS按需加载
2017/04/12 Javascript
微信小程序自定义tabBar组件开发详解
2020/09/24 Javascript
vue cli安装使用less的教程详解
2019/07/12 Javascript
js 动态校验开始结束时间的实现代码
2020/05/25 Javascript
[03:40]DOTA2英雄梦之声_第01期_炼金术士
2014/06/23 DOTA
[51:00]Secret vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
Python实现telnet服务器的方法
2015/07/10 Python
python异步存储数据详解
2019/03/19 Python
Python之修改图片像素值的方法
2019/07/03 Python
Python3爬虫中pyspider的安装步骤
2020/07/29 Python
CSS实现半透明边框与多重边框的场景分析
2019/11/13 HTML / CSS
美国奢侈品购物平台:Orchard Mile
2018/05/02 全球购物
潘多拉珠宝美国官方网站:Pandora US
2020/06/18 全球购物
纠风工作实施方案
2014/03/15 职场文书
2014两会学习心得:榜样精神伴我行
2014/03/17 职场文书
精彩的广告词
2014/03/19 职场文书
《一个小村庄的故事》教学反思
2014/04/13 职场文书
学雷锋月活动总结
2014/04/25 职场文书
宾馆仓管员岗位职责
2014/07/27 职场文书
民主评议党员自我鉴定
2014/10/21 职场文书
幼儿教师师德师风自我评价
2015/03/05 职场文书
使用CSS3实现按钮悬停闪烁动态特效代码
2021/08/30 HTML / CSS