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 相关文章推荐
用CSS+JS实现的进度条效果效果
Jun 05 Javascript
获取内联和链接中的样式(js代码)
Apr 11 Javascript
js获得页面的高度和宽度的方法
Feb 23 Javascript
js中的cookie的读写操作示例详解
Apr 17 Javascript
Node.js中调用mysql存储过程示例
Dec 20 Javascript
js代码实现无缝滚动(文字和图片)
Aug 20 Javascript
基于jQuery实现复选框是否选中进行答题提示
Dec 10 Javascript
必备的JS调试技巧汇总
Jul 20 Javascript
jquery html5 视频播放控制代码
Nov 06 Javascript
iscroll动态加载数据完美解决方法
Jul 18 Javascript
微信小程序 网络通信实现详解
Jul 23 Javascript
浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用
Mar 08 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
咖啡机如何保养和日常清洁?
2021/03/03 冲泡冲煮
ThinkPHP的常用配置选项汇总
2016/03/24 PHP
PHP实现大数(浮点数)取余的方法
2017/02/18 PHP
Laravel框架基于中间件实现禁止未登录用户访问页面功能示例
2019/01/17 PHP
Mootools 1.2教程 Tooltips
2009/09/15 Javascript
用js实现层随着内容大小动态渐变改变 推荐
2009/12/19 Javascript
JQuery实现的在新窗口打开链接的方法小结
2010/04/22 Javascript
JavaScript使用setTimeout实现延迟弹出警告框的方法
2015/04/07 Javascript
使用js复制链接中的部分文字的方法
2015/07/30 Javascript
js阻止浏览器默认行为触发的通用方法(推荐)
2016/05/15 Javascript
深入解析Javascript闭包的功能及实现方法
2016/07/10 Javascript
vuejs动态组件给子组件传递数据的方法详解
2016/09/09 Javascript
vue3.0 CLI - 1 - npm 安装与初始化的入门教程
2018/09/14 Javascript
js使用swiper实现层叠轮播效果实例代码
2018/12/12 Javascript
详解TypeScript+Vue 插件 vue-class-component的使用总结
2019/02/18 Javascript
npx create-react-app xxx创建项目报错的解决办法
2020/02/17 Javascript
OpenLayers加载缩放控件使用方法详解
2020/09/25 Javascript
keep-alive保持组件状态的方法
2020/12/02 Javascript
举例简单讲解Python中的数据存储模块shelve的用法
2016/03/03 Python
Python利用QQ邮箱发送邮件的实现方法(分享)
2017/06/09 Python
python 2.7.14安装图文教程
2018/04/08 Python
Python 中导入csv数据的三种方法
2018/11/01 Python
Python中遍历列表的方法总结
2019/06/27 Python
如何修复使用 Python ORM 工具 SQLAlchemy 时的常见陷阱
2019/11/19 Python
python文件和文件夹复制函数
2020/02/07 Python
ipython jupyter notebook中显示图像和数学公式实例
2020/04/15 Python
python打开文件的方式有哪些
2020/06/29 Python
三方合作协议书范本
2014/04/18 职场文书
文员试用期转正自我鉴定
2014/09/14 职场文书
小学生成绩单评语
2014/12/31 职场文书
家长会感言
2015/08/01 职场文书
班级元旦晚会开幕词
2016/03/04 职场文书
小学语文的各类谚语(70首)
2019/08/15 职场文书
PyTorch 如何设置随机数种子使结果可复现
2021/05/12 Python
MySQL 如何分析查询性能
2021/05/12 MySQL
vue封装数字翻牌器
2022/04/20 Vue.js