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执行效率问题
Nov 12 Javascript
深入理解JavaScript系列(43):设计模式之状态模式详解
Mar 04 Javascript
jQuery实现鼠标划过修改样式的方法
Apr 14 Javascript
javascript实现获取字符串hash值
May 10 Javascript
jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
Sep 09 Javascript
json格式数据的添加,删除及排序方法
Jan 21 Javascript
Ionic默认的Tabs模板使用实例
Aug 29 Javascript
全面解析jQuery中的$(window)与$(document)的用法区别
Aug 15 jQuery
解决Vue+Element ui开发中碰到的IE问题
Sep 03 Javascript
VUE接入腾讯验证码功能(滑块验证)备忘
May 07 Javascript
小程序和web画三角形实现解析
Sep 02 Javascript
jQuery实现查看图片功能
Dec 01 jQuery
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函数
2006/10/09 PHP
解析thinkphp中的导入文件标签
2013/06/20 PHP
php实现将wav文件转换成图像文件并在页面中显示的方法
2015/04/21 PHP
PHP基于XMLWriter操作xml的方法分析
2017/07/17 PHP
Javascript里使用Dom操作Xml
2007/01/22 Javascript
学习YUI.Ext 第六天--关于树TreePanel(Part 1)
2007/03/10 Javascript
js资料toString 方法
2007/03/13 Javascript
jquery中get和post的简单实例
2014/02/04 Javascript
详谈angularjs中路由页面强制更新的问题
2017/04/24 Javascript
vuejs2.0子组件改变父组件的数据实例
2017/05/10 Javascript
vue-cli3项目展示本地Markdown文件的方法
2019/06/07 Javascript
Nodejs实现图片上传、压缩预览、定时删除功能
2019/10/25 NodeJs
vue使用vant中的checkbox实现全选功能
2020/11/17 Vue.js
[02:04]2014DOTA2国际邀请赛 DK一个时代的落幕
2014/07/21 DOTA
[44:40]2018DOTA2亚洲邀请赛3月30日 小组赛A组Liquid VS OG
2018/03/31 DOTA
Python操作Mysql实例代码教程在线版(查询手册)
2013/02/18 Python
python实现定时播放mp3
2015/03/29 Python
Python实现模拟时钟代码推荐
2015/11/08 Python
Python实时获取cmd的输出
2015/12/13 Python
13个最常用的Python深度学习库介绍
2017/10/28 Python
深入浅析Python中的yield关键字
2018/01/24 Python
Php多进程实现代码
2018/05/07 Python
Python使用logging模块实现打印log到指定文件的方法
2018/09/05 Python
python中时间、日期、时间戳的转换的实现方法
2019/07/06 Python
Python稀疏矩阵及参数保存代码实现
2020/04/18 Python
python Cartopy的基础使用详解
2020/11/01 Python
Cynthia Rowley官网:全球领先的生活方式品牌
2020/10/27 全球购物
大学应届生求职简历的自我评价
2013/10/08 职场文书
军神教学反思
2014/02/04 职场文书
潘婷洗发水广告词
2014/03/14 职场文书
经典安踏广告词
2014/03/21 职场文书
诚信考试倡议书
2014/04/15 职场文书
政府四风问题整改措施
2014/10/04 职场文书
银行保安拾金不昧表扬稿
2015/05/05 职场文书
七一晚会主持词
2015/06/29 职场文书
JavaScript异步操作中串行和并行
2021/11/20 Javascript