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的动画类 Fx.js
Nov 05 Javascript
jQuery中$.fn的用法示例介绍
Nov 05 Javascript
js动态修改input输入框的type属性(实现方法解析)
Nov 13 Javascript
原生javascript实现图片滚动、延时加载功能
Jan 12 Javascript
JavaScript基于setTimeout实现计数的方法
May 08 Javascript
jquery.gridrotator实现响应式图片展示画廊效果
Jun 23 Javascript
jQuery基于ID调用指定iframe页面内的方法
Jul 06 Javascript
JavaScript利用正则表达式替换字符串中的内容
Dec 12 Javascript
基于Cookie常用操作以及属性介绍
Sep 07 Javascript
详解Webpack-dev-server的proxy用法
Sep 08 Javascript
js实现web调用摄像头 js截取视频画面
Apr 21 Javascript
JavaScript this指向相关原理及实例解析
Jul 10 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学习之输出字符串(echo,print,printf,print_r和var_dump)
2011/04/17 PHP
Array of country list in PHP with Zend Framework
2011/10/17 PHP
php smarty截取中文字符乱码问题?gb2312/utf-8
2011/11/07 PHP
PHP5.3的垃圾回收机制(动态存储分配方案)深入理解
2012/12/10 PHP
利用curl抓取远程页面内容的示例代码
2013/07/23 PHP
php生成txt文件标题及内容的方法
2014/01/16 PHP
PHP程序员基本要求和必备技能
2014/05/09 PHP
php使用simplexml_load_file加载XML文件并显示XML的方法
2015/03/19 PHP
php使用数组填充下拉列表框的方法
2015/03/31 PHP
详解php中空字符串和0之间的关系
2016/10/23 PHP
Eclipse PHPEclipse 配置的具体步骤
2017/08/08 PHP
Laravel5.5 视图 - 创建视图和数据传递示例
2019/10/21 PHP
JQuery 动态扩展对象之另类视角
2010/05/25 Javascript
jquery增加和删除元素的方法
2015/01/14 Javascript
jQuery使用after()方法在元素后面添加多项内容的方法
2015/03/26 Javascript
JavaScript中的some()方法使用详解
2015/06/09 Javascript
cocos2dx骨骼动画Armature源码剖析(一)
2015/09/08 Javascript
Bootstrap Table的使用总结
2016/10/08 Javascript
从零开始学习Node.js系列教程一:http get和post用法分析
2017/04/13 Javascript
关于Vue实现组件信息的缓存问题
2017/08/23 Javascript
Angular实现搜索框及价格上下限功能
2018/01/19 Javascript
轻量级JS Cookie插件js-cookie的使用方法
2018/03/22 Javascript
详解React Native 屏幕适配(炒鸡简单的方法)
2018/06/11 Javascript
使用js实现单链解决前端队列问题的方法
2020/02/03 Javascript
单线程JavaScript实现异步过程详解
2020/05/19 Javascript
js代码编写无缝轮播图
2020/09/13 Javascript
python调用Moxa PCOMM Lite通过串口Ymodem协议实现发送文件
2014/08/15 Python
python使用clear方法清除字典内全部数据实例
2015/07/11 Python
Python 爬取携程所有机票的实例代码
2018/06/11 Python
python卸载后再次安装遇到的问题解决
2019/07/10 Python
python:批量统计xml中各类目标的数量案例
2020/03/10 Python
解决django migrate报错ORA-02000: missing ALWAYS keyword
2020/07/02 Python
文明学生标兵事迹
2014/01/21 职场文书
课改先进个人汇报材料
2014/01/26 职场文书
《跨越百年的美丽》教学反思
2014/02/11 职场文书
MySQL中存储时间的最佳实践指南
2021/07/01 MySQL