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 相关文章推荐
Javascript 网页水印(非图片水印)实现代码
Mar 01 Javascript
js中switch case循环实例代码
Dec 30 Javascript
javascript使用数组的push方法完成快速排序
Sep 15 Javascript
jquery中EasyUI实现同步树
Mar 01 Javascript
通过设置CSS中的position属性来固定层的位置
Dec 14 Javascript
jQuery 监控键盘一段时间没输入
Apr 22 Javascript
TypeScript学习之强制类型的转换
Dec 27 Javascript
浅谈Vuejs中nextTick()异步更新队列源码解析
Dec 31 Javascript
React全家桶环境搭建过程详解
May 18 Javascript
微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能
Sep 26 Javascript
微信小程序12行js代码自己写个滑块功能(推荐)
Jul 15 Javascript
js+html+css实现手动轮播和自动轮播
Dec 30 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
php的字符串用法小结
2010/06/08 PHP
Zend Framework入门教程之Zend_View组件用法示例
2016/12/09 PHP
Json_decode 解析json字符串为NULL的解决方法(必看)
2017/02/17 PHP
PHP基于方差和标准差计算学生成绩的稳定性示例
2017/07/04 PHP
PHP token验证生成原理实例分析
2019/06/05 PHP
基于Laravel(5.4版本)的基本增删改查操作方法
2019/10/11 PHP
jQuery ajax cache缓存问题
2010/07/01 Javascript
javascript实现数字+字母验证码的简单实例
2014/02/10 Javascript
JavaScript 学习笔记之数据类型
2015/01/14 Javascript
JS+CSS实现可拖动的弹出提示框
2015/02/16 Javascript
jquery显示loading图片直到网页加载完成的方法
2015/06/25 Javascript
jQuery实现仿美橙互联两级导航菜单效果完整实例
2015/09/17 Javascript
Google 地图API资料整理及详细介绍
2016/08/06 Javascript
基于vue2.0+vuex的日期选择组件功能实现
2017/03/13 Javascript
javascript中this的用法实践分析
2019/07/29 Javascript
基于VSCode调试网页JavaScript代码过程详解
2020/07/20 Javascript
Python模拟登录验证码(代码简单)
2016/02/06 Python
简单谈谈python中的Queue与多进程
2016/08/25 Python
Django中login_required装饰器的深入介绍
2017/11/24 Python
一个月入门Python爬虫学习,轻松爬取大规模数据
2018/01/03 Python
Python单元测试简单示例
2018/07/03 Python
Python列表(List)知识点总结
2019/02/18 Python
python3中关于excel追加写入格式被覆盖问题(实例代码)
2020/01/10 Python
浅析Python 抽象工厂模式的优缺点
2020/07/13 Python
Numpy ndarray 多维数组对象的使用
2021/02/10 Python
美国时尚大码女装购物网站:Avenue
2019/05/24 全球购物
能源工程专业应届生求职信
2014/03/01 职场文书
开门红主持词
2014/04/02 职场文书
餐饮投资计划书
2014/04/25 职场文书
给校长的建议书100字
2014/05/16 职场文书
公司晚会策划方案
2014/05/17 职场文书
个人授权委托书范本格式
2014/10/12 职场文书
学校青年志愿者活动总结
2015/05/06 职场文书
理想国读书笔记
2015/06/25 职场文书
JavaScript 定时器详情
2021/11/11 Javascript
MySQL 数据表操作
2022/05/04 MySQL