vue-cli webpack 开发环境跨域详解


Posted in Javascript onMay 18, 2017

edit dev.proxyTable option in config/index.js. The dev server is using http-proxy-middleware for proxying

为了解决跨域问题,

  1. 通常会使用Jsonp,但是jsonp只能是get请求。
  2. 或者使用CORS支持,设置Access-Control-Allow-Origin: *

0 前置技能

熟悉vue-loader 和 webpack

 1 基本配置

编辑confix/index.js文件 dev server使用的是http-proxy-middleware来代理

// config/index.js
module.exports = {
 // ...
 dev: {
  proxyTable: {
   // proxy all requests starting with /api to jsonplaceholder
   '/api': {
    target: 'http://jsonplaceholder.typicode.com',
    changeOrigin: true,
    pathRewrite: {
     '^/api': ''
    }
   }
  }
 }
}

The above example will proxy the request /api/posts/1 to http://jsonplaceholder.typicode.com/posts/1.

 2 全局匹配

you can provide a filter option that can be a custom function to determine whether a request should be proxied:

提供一个过滤器,制定路由规则和路由方法。

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

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

Javascript 相关文章推荐
js函数排序的实例代码
Jul 01 Javascript
javascript禁用键盘功能键让右击及其他键无效
Oct 09 Javascript
div浮层,滚动条移动,位置保持不变的4种方法汇总
Dec 11 Javascript
JavaScript中双叹号!!作用示例介绍
Sep 21 Javascript
jQuery实现默认是闭合的FAQ展开效果菜单
Sep 14 Javascript
Angularjs全局变量被作用域监听的正确姿势
Feb 06 Javascript
JS实现为排序好的字符串找出重复行的方法
Mar 02 Javascript
ReactJs设置css样式的方法
Jun 08 Javascript
JavaScript截屏功能的实现代码
Jul 28 Javascript
基于js中style.width与offsetWidth的区别(详解)
Nov 12 Javascript
创建echart多个联动的示例代码
Nov 23 Javascript
原生JS实现微信通讯录
Jun 18 Javascript
JavaScript实现简单的星星评分效果
May 18 #Javascript
Javascript循环删除数组中元素的几种方法示例
May 18 #Javascript
Javascript实现信息滚动效果
May 18 #Javascript
详解Vue-cli 创建的项目如何跨域请求
May 18 #Javascript
Bootstrap table学习笔记(2) 前后端分页模糊查询
May 18 #Javascript
BootStrap 导航条实例代码
May 18 #Javascript
AngularJS全局警告框实现方法示例
May 18 #Javascript
You might like
【COS正片】蕾姆睡衣cos,纯洁可爱被治愈了 cn名濑弥七
2020/03/02 日漫
PHP中使用socket方式GET、POST数据实例
2015/04/02 PHP
Windows下编译PHP5.4和xdebug全记录
2015/04/03 PHP
php 如何设置一个严格控制过期时间的session
2017/05/05 PHP
PHP读取文件或采集时解决中文乱码
2021/03/09 PHP
javascript 面向对象编程  function是方法(函数)
2009/09/17 Javascript
JavaScript 对象成员的可见性说明
2009/10/16 Javascript
js实现键盘操作实现div的移动或改变的原理及代码
2014/06/23 Javascript
jQuery中:file选择器用法实例
2015/01/04 Javascript
javascript实现10个球随机运动、碰撞实例详解
2015/07/08 Javascript
JS实现slide文字框缩放伸展效果代码
2015/11/05 Javascript
解析AngularJS中get请求URL出现的跨域问题
2016/12/01 Javascript
微信小程序 MD5加密登录密码详解及实例代码
2017/01/12 Javascript
JavaScript解析JSON格式数据的方法示例
2017/01/24 Javascript
简单实现js倒计时功能
2017/02/13 Javascript
JavaScript中递归实现的方法及其区别
2017/09/12 Javascript
css和js实现弹出登录居中界面完整代码
2017/11/26 Javascript
layui table动态表头 改变表格头部 重新加载表格的方法
2019/09/21 Javascript
小程序如何写动态标签的实现方法
2020/02/05 Javascript
vue+element 实现商城主题开发的示例代码
2020/03/26 Javascript
[52:37]完美世界DOTA2联赛循环赛 Forest vs DM BO2第一场 10.29
2020/10/29 DOTA
python使用PyGame播放Midi和Mp3文件的方法
2015/04/24 Python
Python实现SMTP发送邮件详细教程
2021/03/02 Python
python 读取文本文件的行数据,文件.splitlines()的方法
2018/07/12 Python
用python爬取历史天气数据的方法示例
2019/12/30 Python
收藏!10个免费高清视频素材网站!【设计、视频剪辑必备】
2021/03/18 杂记
Maje德国官网:法国女性成衣品牌
2017/02/10 全球购物
英国女装网上商店:I Saw It First
2018/10/18 全球购物
德国专业木制品经销商:Holz-Direkt24
2019/12/26 全球购物
英国奢侈品牌时尚购物平台:Farfetch(支持中文)
2020/02/18 全球购物
得到Class的三个过程是什么
2012/08/10 面试题
运动会广播稿50字
2014/01/26 职场文书
日语专业毕业生自荐书
2014/06/18 职场文书
2014市国税局对照检查材料思想汇报
2014/09/23 职场文书
vue backtop组件的实现完整代码
2021/04/07 Vue.js
Redis基本数据类型String常用操作命令
2022/06/01 Redis