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 相关文章推荐
为jquery.ui.dialog 增加“自动记住关闭时的位置”的功能
Nov 24 Javascript
ext combox 下拉框不出现自动提示,自动选中的解决方法
Feb 24 Javascript
JavaScript 滚轮事件使用说明
Mar 07 Javascript
jQuery EasyUi实战教程之布局篇
Jan 26 Javascript
简单实现JavaScript图片切换效果
Nov 28 Javascript
node+express+ejs使用模版引擎做的一个示例demo
Sep 18 Javascript
promise和co搭配生成器函数方式解决js代码异步流程的比较
May 25 Javascript
Vue2.0 实现移动端图片上传功能
May 30 Javascript
用vscode开发vue应用的方法步骤
May 06 Javascript
vue移动端模态框(可传参)的实现
Nov 20 Javascript
JavaScript 实现下雪特效的示例代码
Sep 09 Javascript
Vue与React的区别和优势对比
Dec 18 Vue.js
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网页游戏学习之Xnova(ogame)源码解读(十)
2014/06/24 PHP
php查询mssql出现乱码的解决方法
2014/12/29 PHP
PHP记录页面停留时间的方法
2016/03/30 PHP
php使用正则表达式获取字符串中的URL
2016/12/29 PHP
php实现的二叉树遍历算法示例
2017/06/15 PHP
PHP中的访问修饰符简单比较
2019/02/02 PHP
laravel框架学习笔记之组件化开发实现方法
2020/02/01 PHP
用js生产批量批处理执行命令
2008/07/28 Javascript
jQuery 标题的自动翻转实现代码
2009/10/14 Javascript
利用jQuery接受和处理xml数据的代码(.net)
2011/03/28 Javascript
Jquery模仿Baidu、Google搜索时自动补充搜索结果提示
2013/12/26 Javascript
js获取指定的cookie的具体实现
2014/02/20 Javascript
jQuery响应鼠标事件并隐藏与显示input默认值
2014/08/24 Javascript
Jquery中find与each方法用法实例
2015/02/04 Javascript
详解javascript事件冒泡
2016/01/09 Javascript
深入浅出ES6之let和const命令
2016/08/25 Javascript
浅谈javascript中的三种弹窗
2016/10/21 Javascript
简单学习5种处理Vue.js异常的方法
2019/06/17 Javascript
layui实现数据表格自定义数据项
2019/10/26 Javascript
js仿淘宝放大镜效果
2020/12/28 Javascript
[46:50]Liquid vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
用Python批量把文件复制到另一个文件夹的实现方法
2019/08/16 Python
Python 寻找局部最高点的实现
2019/12/05 Python
python函数调用,循环,列表复制实例
2020/05/03 Python
Python装饰器结合递归原理解析
2020/07/02 Python
canvas绘制文本内容自动换行的实现代码
2019/01/14 HTML / CSS
法国房车租赁网站:Yescapa
2019/08/26 全球购物
中职生自我鉴定范文
2013/10/03 职场文书
汽修专业学生自我鉴定
2013/11/16 职场文书
配件采购员岗位职责
2013/12/03 职场文书
总经理助理职责
2014/02/04 职场文书
《月亮湾》教学反思
2014/04/14 职场文书
公司门卫工作职责
2014/06/28 职场文书
企业总经理助理岗位职责
2014/09/12 职场文书
秦始皇兵马俑导游词
2015/02/02 职场文书
毕业论文致谢信
2015/05/14 职场文书