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代码
Sep 18 Javascript
Jquery实现由下向上展开效果的例子
Dec 08 Javascript
继续学习javascript闭包
Dec 03 Javascript
微信小程序 使用picker封装省市区三级联动实例代码
Oct 28 Javascript
AngularJS实现表单验证功能
Jan 09 Javascript
node实现简单的反向代理服务器
Jul 26 Javascript
js实现拖拽上传图片功能
Aug 01 Javascript
用Webpack构建Vue项目的实践
Nov 07 Javascript
浅谈Vue SSR 的 Cookies 问题
Nov 20 Javascript
vue服务端渲染操作简单入门实例分析
Aug 28 Javascript
javascript简单实现深浅拷贝过程详解
Oct 08 Javascript
vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决
Sep 28 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
5.PHP的其他功能
2006/10/09 PHP
一周学会PHP(视频)Http下载
2006/12/12 PHP
TP5框架安全机制实例分析
2020/04/05 PHP
javascript 面向对象全新理练之原型继承
2009/12/03 Javascript
两种简单实现菜单高亮显示的JS类代码
2010/06/27 Javascript
Jquery动态改变图片IMG的src地址示例
2013/06/25 Javascript
jQuery随便控制任意div隐藏的方法
2013/06/28 Javascript
JavaScript实现自动切换图片代码
2016/10/11 Javascript
Windows系统下安装Node.js的步骤图文详解
2016/11/15 Javascript
Vue通过input筛选数据
2020/10/26 Javascript
JS判断微信扫码的方法
2017/08/07 Javascript
JavaScript实现一个简易的计算器实例代码
2018/05/10 Javascript
解决vue组件props传值对象获取不到的问题
2019/06/06 Javascript
JS实现轮播图效果
2020/01/11 Javascript
js实现带有动画的返回顶部
2020/08/09 Javascript
[06:37]2014DOTA2国际邀请赛 昔日王者渴望重回巅峰
2014/07/12 DOTA
比较详细Python正则表达式操作指南(re使用)
2008/09/06 Python
浅述python中深浅拷贝原理
2018/09/18 Python
python多进程重复加载的解决方式
2019/12/13 Python
TensorFlow实现自定义Op方式
2020/02/04 Python
python自动点赞功能的实现思路
2020/02/26 Python
matlab中二维插值函数interp2的使用详解
2020/04/22 Python
CSS3动画:5种预载动画效果实例
2017/04/05 HTML / CSS
英国马匹装备和马术用品购物网站:Equine Superstore
2019/03/03 全球购物
Envie de Fraise意大利:法国网上推出的孕妇装品牌
2020/10/18 全球购物
《卖木雕的少年》教学反思
2014/04/11 职场文书
个人安全生产承诺书
2014/05/22 职场文书
纪检干部先进事迹材料
2014/08/23 职场文书
国际商务专业毕业生自我鉴定2014
2014/09/27 职场文书
正风肃纪剖析材料范文
2014/10/10 职场文书
英文导游词
2015/02/13 职场文书
单位推荐信范文
2015/03/27 职场文书
2015大学生入党个人自传
2015/06/26 职场文书
python解决12306登录验证码的实现
2021/04/18 Python
你真的了解redis为什么要提供pipeline功能
2021/06/22 Redis
Python 统计序列中元素的出现频度
2022/04/26 Python