详解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 相关文章推荐
用 JavaScript 迁移目录
Dec 18 Javascript
经常用到的JavasScript事件的翻译
Apr 09 Javascript
Discuz! 6.1_jQuery兼容问题
Sep 23 Javascript
JavaScript 学习笔记 Black.Caffeine 09.11.28
Nov 30 Javascript
JavaScript中yield实用简洁实现方式
Jun 12 Javascript
jquery实现的鼠标拖动排序Li或Table
May 04 Javascript
jQuery CSS()方法改变现有的CSS样式表
Sep 09 Javascript
使用Meteor配合Node.js编写实时聊天应用的范例
Jun 23 Javascript
全面解析Bootstrap中nav、collapse的使用方法
May 22 Javascript
JavaScript中闭包的详解
Apr 01 Javascript
微信小程序图表插件wx-charts用法实例详解
May 20 Javascript
Vue 中使用 typescript的方法详解
Feb 17 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
async和DOM Script文件加载比较
2014/07/20 PHP
PHP5多态性与动态绑定介绍
2015/04/03 PHP
搜索附近的人PHP实现代码
2018/02/11 PHP
ie 处理 gif动画 的onload 事件的一个 bug
2007/04/12 Javascript
javascript concat数组累加 示例
2009/09/03 Javascript
JQuery的ajax获取数据后的处理总结(html,xml,json)
2010/07/14 Javascript
Javascript中设置默认参数值示例
2014/09/11 Javascript
jquery利用命名空间移除绑定事件的方法
2015/03/11 Javascript
jQuery实现的进度条效果
2015/07/15 Javascript
javascript实现网页屏蔽Backspace事件,输入框不屏蔽
2015/07/21 Javascript
jquery实现全选、反选、获得所有选中的checkbox
2020/09/13 Javascript
vue开发心得和技巧分享
2016/10/27 Javascript
JS+HTML5 FileReader对象用法示例
2017/04/07 Javascript
详解angular笔记路由之angular-router
2017/09/12 Javascript
基于D3.js实现时钟效果
2018/07/17 Javascript
解决vue-router在同一个路由下切换,取不到变化的路由参数问题
2018/09/01 Javascript
JS数据类型STRING使用实例解析
2019/12/18 Javascript
vue开发简单上传图片功能
2020/06/30 Javascript
一篇文章让你搞懂JavaScript 原型和原型链
2020/11/23 Javascript
python模拟Django框架实例
2016/05/17 Python
Python闭包执行时值的传递方式实例分析
2018/06/04 Python
Windows 安装 Anaconda3+PyCharm的方法步骤
2019/06/13 Python
Python GUI学习之登录系统界面篇
2019/08/21 Python
django-csrf使用和禁用方式
2020/03/13 Python
Python3爬虫mitmproxy的安装步骤
2020/07/29 Python
CSS3 Flexbox中flex-shrink属性的用法示例介绍
2013/12/30 HTML / CSS
Html5页面中的返回实现的方法
2018/02/26 HTML / CSS
2014年社区学雷锋活动总结
2014/03/09 职场文书
中考冲刺决心书
2014/03/11 职场文书
文秘求职信范文
2014/04/10 职场文书
《她是我的朋友》教学反思
2014/04/26 职场文书
给校长的建议书500字
2014/05/15 职场文书
监考失职检讨书
2015/01/26 职场文书
2015年度学校应急管理工作总结
2015/10/22 职场文书
Python 数据可视化之Matplotlib详解
2021/11/02 Python
vue项目proxyTable配置和部署服务器
2022/04/14 Vue.js