详解webpack-dev-server使用http-proxy解决跨域问题


Posted in Javascript onJanuary 13, 2018

文档资料

webpack关于webpack-dev-server开启proxy的官方介绍

Vue-cli proxyTable 解决开发环境的跨域问题——虽然这篇是写vue的,不过用在webpack-dev-server上也是一样的

http-proxy-middleware——webpack-dev-server的实现方法其实是对这个的封装

配置http-proxy

在webpack的配置文件(webpack.config.js)中进行配置

module.exports = {
 ...此处省略一万字

 // webpack-dev-server的配置
 devServer: {
 historyApiFallback: true,
 hot: true,
 inline: true,
 progress: true,
 port: 3000,
 host: '10.0.0.9',
 proxy: {
 '/test/*': {
 target: 'http://localhost',
 changeOrigin: true,
 secure: false
 }
 }
 },

 ...此处省略一万字
};

上述配置中,关于http-proxy的只是 proxy: {...} 中的值

调用接口

为了方便起见,下面使用jquery封装好的ajax函数进行示范

$.ajax({
 // url: 'http://10.0.0.9:3000/test/testFetch/Login.php', // 这样不行
 url: '/test/testFetch/Login.php', // 这样行
 type: 'post',
 data: {
 app_id: '13751313169',
 password: '123456',
 user_name: 'Nicholas'
 },
 success: function(data) {
 console.log(data);
 }
});

proxy中的部分参数说明

'/test/*' 以及 target: 'http://localhost'

从名字就能看出,这个实际上是将匹配 '/test/*' 这种格式的API的域名重定向为 'http://localhost'

  1. 结合上面的 “调用接口” 可以看出, url: '/test/testFetch/Login.php' 这句,实际上会自动补充前缀,也就是说,url: '/test/testFetch/Login.php' 等价于 url: 'http://10.0.0.9:3000/test/testFetch/Login.php'
  2. 但是,我们使用了http-proxy进行重定向,这样的话,url: '/test/testFetch/Login.php' 等价于 url: 'http://localhost/test/testFetch/Login.php'

changeOrigin

  1. true/false, Default: false - changes the origin of the host header to the target URL
  2. 本地会虚拟一个服务端接收你的请求并代你发送该请求——这个是别人的说法
  3. 我试了一下,就算这个参数设置成 false 也有部分情况是可以的,具体原因不详,所以还是将其设置成 true 吧

secure

  1. true/false, if you want to verify the SSL Certs

pathRewrite

  1. 例子: pathRewrite: {'^/api': ''}
  2. Object-keys will be used as RegExp to match paths
  3. 我猜,这里是将 '^/api' 使用 '' 代替(只是我猜,没是成功,估计是我的正则表达式写得不行)

附上使用Fetch API的代码

上述代码与 “调用接口” 中使用 $.ajax() 实现的效果是一样的

let testAsync = async function () {
 var feeling = {
 app_id: '13751313169',
 password: '123456',
 user_name: 'Nicholas'
 };

 var fetchParams = {
 method: 'post',
 headers: {
 'Accept': 'application/json',
 'Content-Type': 'application/json'
 },
 credentials: 'include', // 将凭证也带上(例如cookies)
 body: JSON.stringify(feeling),
 };

 let temp = await fetch('/test/testFetch/Login.php', fetchParams).then(response => response.text());

 console.log(temp); // 这个就是一个json对象

 return temp;
};

let data = testAsync(); // async函数返回值是一个Promise对象

console.log(data); // 这个是一个Promise对象

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

Javascript 相关文章推荐
JavaScript Event学习第八章 事件的顺序
Feb 07 Javascript
JavaScript实现选择框按比例拖拉缩放的方法
Aug 04 Javascript
javascript中的previousSibling和nextSibling的正确用法
Sep 16 Javascript
jQueryUI DatePicker 添加时分秒
Jun 04 Javascript
Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
Mar 13 Javascript
Windows安装Node.js报错:2503、2502的解决方法
Oct 25 Javascript
详解es6超好用的语法糖Decorator
Aug 01 Javascript
JavaScript常见JSON操作实例分析
Aug 08 Javascript
浅谈KOA2 Restful方式路由初探
Mar 14 Javascript
微信小程序 腾讯地图SDK 获取当前地址实现解析
Aug 12 Javascript
在JavaScript中实现链式调用的实现
Dec 24 Javascript
vuejs实现下拉框菜单选择
Oct 23 Javascript
vuejs实现递归树型菜单组件
Jan 13 #Javascript
在vue中通过axios异步使用echarts的方法
Jan 13 #Javascript
详解基于vue-cli配置移动端自适应
Jan 13 #Javascript
javascript用rem来做响应式开发
Jan 13 #Javascript
深入理解ES6之数据解构的用法
Jan 13 #Javascript
详解ES6语法之可迭代协议和迭代器协议
Jan 13 #Javascript
详解如何在React组件“外”使用父组件的Props
Jan 12 #Javascript
You might like
社区(php&&mysql)一
2006/10/09 PHP
javascript Array.remove() 数组删除
2009/08/06 Javascript
滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码
2009/12/28 Javascript
js几个验证函数代码
2010/03/25 Javascript
JS实现进入页面时渐变背景色的方法
2015/02/25 Javascript
javascript实现动态改变层大小的方法
2015/05/14 Javascript
javascript获取网页宽高方法汇总
2015/07/19 Javascript
jQuery轻松实现表格的隔行变色和点击行变色的实例代码
2016/05/09 Javascript
微信小程序 wxapp视图容器 view详解
2016/10/31 Javascript
js简单正则验证汉字英文及下划线的方法
2016/11/28 Javascript
详解JS对象封装的常用方式
2016/12/30 Javascript
浅谈JavaScript中的apply/call/bind和this的使用
2017/02/26 Javascript
微信小程序 检查接口状态实例详解
2017/06/23 Javascript
详解用vue编写弹出框组件
2017/07/04 Javascript
浅谈vue项目可以从哪些方面进行优化
2018/05/05 Javascript
详解mpvue中小程序自定义导航组件开发指南
2019/02/11 Javascript
利用d3.js实现蜂巢图表带动画效果
2019/09/03 Javascript
微信小程序实现蒙版弹出窗功能
2019/09/17 Javascript
[01:34]2014DOTA2展望TI 剑指西雅图VG战队专访
2014/06/30 DOTA
Python语言技巧之三元运算符使用介绍
2013/03/04 Python
Python之自动获取公网IP的实例讲解
2017/10/01 Python
python+influxdb+shell编写区域网络状况表
2018/07/27 Python
python实现的分析并统计nginx日志数据功能示例
2019/12/21 Python
keras获得model中某一层的某一个Tensor的输出维度教程
2020/01/24 Python
python文件和文件夹复制函数
2020/02/07 Python
Python中的特殊方法以及应用详解
2020/09/20 Python
Python 实现3种回归模型(Linear Regression,Lasso,Ridge)的示例
2020/10/15 Python
AmazeUI 缩略图的实现示例
2020/08/18 HTML / CSS
CK美国官网:Calvin Klein
2016/08/26 全球购物
Mistine官方海外旗舰店:泰国国民彩妆品牌
2016/12/28 全球购物
十一个高级MySql面试题
2014/10/06 面试题
大三学生做职业规划:给未来找个方向
2014/02/24 职场文书
公司委托书怎么写
2014/08/02 职场文书
二手房购房协议书范本
2014/10/05 职场文书
2015年秋季运动会广播稿
2015/08/19 职场文书
利用python调用摄像头的实例分析
2021/06/07 Python