详解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 相关文章推荐
表单元素事件 (Form Element Events)
Jul 17 Javascript
xml 封装与解析(javascript和C#中)
Jul 26 Javascript
javascript hasFocus使用实例
Jun 29 Javascript
cookie 最近浏览记录(中文escape转码)具体实现
Jun 08 Javascript
JQuery中extend使用介绍
Mar 13 Javascript
用JavaScript实现PHP的urlencode与urldecode函数
Aug 13 Javascript
Node.js与MySQL交互操作及其注意事项
Oct 05 Javascript
Javascript实现图片懒加载插件的方法
Oct 20 Javascript
BootStrap 图标icon符号图标glyphicons不正常显示的快速解决办法
Dec 08 Javascript
echarts同一页面中四个图表切换的js数据交互方法示例
Jul 03 Javascript
微信小程序websocket实现聊天功能
Mar 30 Javascript
vue实现分页加载效果
Dec 24 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中读取文件的8种方法和代码实例
2014/08/05 PHP
PHP版单点登陆实现方案的实例
2016/11/17 PHP
php删除一个路径下的所有文件夹和文件的方法
2018/02/07 PHP
PHPStudy下如何为Apache安装SSL证书的方法步骤
2019/01/23 PHP
解决jquery .ajax 在IE下卡死问题的解决方法
2009/10/26 Javascript
JavaScript 原型学习总结
2010/10/29 Javascript
5个最佳的Javascript日期处理类库分享
2012/04/15 Javascript
FusionCharts图表显示双Y轴双(多)曲线
2012/11/22 Javascript
JS与jQuery实现隔行变色的方法
2016/09/09 Javascript
angular.js之路由的选择方法
2016/09/24 Javascript
Bootstrap缩略图与警告框学习使用
2017/02/08 Javascript
分析JavaScript数组操作难点
2017/12/18 Javascript
在Vue组件上动态添加和删除属性方法
2018/02/23 Javascript
关于vue中 $emit的用法详解
2018/04/12 Javascript
js正则取值的结果数组调试方法
2018/10/10 Javascript
详解js 创建对象的几种方法
2019/03/08 Javascript
vue+高德地图写地图选址组件的方法
2019/05/18 Javascript
[51:06]2018DOTA2亚洲邀请赛3月29日 小组赛A组 KG VS Liquid
2018/03/30 DOTA
[31:29]完美世界DOTA2联赛PWL S3 INK ICE vs Magma 第一场 12.20
2020/12/23 DOTA
Python实现读取机器硬件信息的方法示例
2018/06/09 Python
Python键盘输入转换为列表的实例
2018/06/23 Python
Django进阶之CSRF的解决
2018/08/01 Python
python求绝对值的三种方法小结
2019/12/04 Python
python字典和json.dumps()的遇到的坑分析
2020/03/11 Python
美国杰西潘尼官网:JCPenney
2019/06/12 全球购物
施工协议书范本
2014/04/22 职场文书
优秀的应届生自荐信
2014/05/23 职场文书
小学生我的梦想演讲稿
2014/08/21 职场文书
教师民族团结演讲稿
2014/08/27 职场文书
长城的导游词
2015/01/30 职场文书
丽江古城导游词
2015/02/03 职场文书
应届生简历自我评价
2015/03/11 职场文书
《丑小鸭》教学反思
2016/02/19 职场文书
大学生奖学金获奖感言(范文)
2019/08/15 职场文书
关于mysql中时间日期类型和字符串类型的选择
2021/11/27 MySQL
MySQL磁盘碎片整理实例演示
2022/04/03 MySQL