详解vue-cli开发环境跨域问题解决方案


Posted in Javascript onJune 06, 2017

前后端分离开发中必要会遇到的问题—跨域。在使用vue开发的时候,开始为了解决跨域问题。采用的是CORS(Cross-origin resource sharing)。后台在响应头中添加Access-Control-Allow-Origin。这样就可以跨域调后台接口了。

在前几天无意中看到了config的index.js文件中有一个proxyTable属性,通过配置可以解决开发环境的跨域

开发期间的API代理

当将此样板与现有后端集成时,通常需要在使用dev服务器时访问后端API。为了实现这一点,我们可以并行(或远程)运行dev服务器和API后端,并让dev服务器将所有API请求代理到实际的后端。

要配置代理规则,请在其中编辑dev.proxyTable选项config/index.js。dev服务器正在使用http代理中间件进行代理,因此您应参考其文档以获取详细的用法。但这是一个简单的例子:

// config/index.js
module.exports = {
 // ...
 dev: {
 proxyTable: {
  // proxy all requests starting with /api to jsonplaceholder
  '/api': {
  target: 'http://jsonplaceholder.typicode.com',
  changeOrigin: true,
  pathRewrite: { //需要rewrite重写的, 如果在服务器端做了处理则可以不要这段
   '^/api': ''
  }
  }
 }
 }
}

上面的示例将代理请求/api/posts/1到http://jsonplaceholder.typicode.com/posts/1。

如果

pathRewrite: { 
‘^/api': ‘api' 
},

则将代理请求/api/posts/1到http://jsonplaceholder.typicode.com/api/posts/1。

网址匹配

除了静态网址之外,您还可以使用glob模式来匹配URL,例如/api/**。有关详细信息,请参阅上下文匹配。此外,您可以提供一个filter可以是自定义函数的选项,以确定请求是否应被代理:

proxyTable: {
 '*': {
 target: 'http://jsonplaceholder.typicode.com',
 filter: function (pathname, req) {
  return pathname.match('^/api') && req.method === 'GET'
 }
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
window.onload 加载完毕的问题及解决方案(下)
Jul 09 Javascript
ASP.NET jQuery 实例8 (动态添加内容到DropDownList)
Feb 03 Javascript
异步动态加载js与css文件的js代码
Sep 15 Javascript
struts2+jquery组合验证注册用户是否存在
Apr 30 Javascript
JavaScript实现鼠标滑过图片变换效果的方法
Apr 16 Javascript
js编写三级联动简单案例
Dec 21 Javascript
vue模板语法-插值详解
Mar 06 Javascript
js实时监控文本框输入字数的实例代码
Jan 18 Javascript
Vue header组件开发详解
Jan 26 Javascript
js事件on动态绑定数据,绑定多个事件的方法
Sep 15 Javascript
Element UI框架中巧用树选择器的实现
Dec 12 Javascript
浅谈layui 绑定form submit提交表单的注意事项
Oct 25 Javascript
JS实现微信里判断页面是否被分享成功的方法
Jun 06 #Javascript
详解Vue 开发模式下跨域问题
Jun 06 #Javascript
JS实现经典的中国地区三级联动下拉菜单功能实例【测试可用】
Jun 06 #Javascript
深入理解vue-loader如何使用
Jun 06 #Javascript
利用webstrom调试Vue.js单页面程序的方法教程
Jun 06 #Javascript
JavaScript实现一个空中避难的小游戏
Jun 06 #Javascript
vue脚手架vue-cli的学习使用教程
Jun 06 #Javascript
You might like
Base64在线编码解码实现代码 演示与下载
2011/01/08 PHP
PHP 自定义错误处理函数trigger_error()
2013/03/26 PHP
PHP数组式访问接口ArrayAccess用法分析
2017/12/28 PHP
PHP的PDO错误与错误处理
2019/01/27 PHP
JavaScript判断密码强度(自写代码)
2013/09/06 Javascript
javascript ajax 仿百度分页函数
2013/10/29 Javascript
JS的参数传递示例介绍
2014/02/08 Javascript
javascript监听鼠标滚轮事件浅析
2014/06/05 Javascript
JS表的模拟方法
2015/02/05 Javascript
jQuery.position()方法获取不到值的安全替换方法
2015/03/13 Javascript
JavaScript基本语法讲解
2015/06/03 Javascript
全面了解JavaScript的数据类型转换
2016/07/01 Javascript
纯js实现倒计时功能
2017/01/06 Javascript
深入理解jquery的$.extend()、$.fn和$.fn.extend()
2017/07/08 jQuery
基于JS实现带动画效果的流程进度条
2018/06/01 Javascript
element el-input directive数字进行控制
2018/10/11 Javascript
详解vue配置后台接口方式
2019/03/29 Javascript
[15:35]教你分分钟做大人:天怒法师
2014/10/30 DOTA
[01:52]2020年DOTA2 TI10夏季活动预告片
2020/07/15 DOTA
Python中使用第三方库xlutils来追加写入Excel文件示例
2015/04/05 Python
Mac 上切换Python多版本
2017/06/17 Python
Python字符串拼接的几种方法整理
2017/08/02 Python
使用python实现链表操作
2018/01/26 Python
python批量实现Word文件转换为PDF文件
2018/03/15 Python
Python Learning 列表的更多操作及示例代码
2018/08/22 Python
详解python的四种内置数据结构
2019/03/19 Python
PyCharm MySQL可视化Database配置过程图解
2020/06/09 Python
python Timer 类使用介绍
2020/12/28 Python
波兰品牌内衣及泳装网上商店:Astratex.pl
2017/02/03 全球购物
卡塔尔航空官方网站:Qatar Airways
2017/02/08 全球购物
捷克街头、运动和滑板一站式商店:BoardStar.cz
2019/10/06 全球购物
汉语言文学毕业生自荐信范文
2014/03/24 职场文书
中小企业员工手册范本
2015/05/14 职场文书
英语演讲开场白
2015/05/29 职场文书
React如何创建组件
2021/06/27 Javascript
mybatis中sql语句CDATA标签的用法说明
2021/06/30 Java/Android