Webpack devServer中的 proxy 实现跨域的解决


Posted in Javascript onJune 15, 2018

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

文档资料

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'

结合上面的 “调用接口” 可以看出, url:
 '/test/testFetch/Login.php' 这句,实际上会自动补充前缀,也就是说,url:
 '/test/testFetch/Login.php' 等价于 url: 'http://10.0.0.9:3000/test/testFetch/Login.php'

但是,我们使用了http-proxy进行重定向,这样的话,url:
 '/test/testFetch/Login.php' 等价于 url: 'http://localhost/test/testFetch/Login.php'

changeOrigin

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

secure

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

pathRewrite

例子: pathRewrite:
 {'^/api': ''}

Object-keys will be used as RegExp to match paths

我猜,这里是将 '^/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中的不可见数据类型
Dec 02 Javascript
现如今最流行的JavaScript代码规范
Mar 08 Javascript
jQuery中:nth-child选择器用法实例
Dec 31 Javascript
js获取form的方法
May 06 Javascript
浅析jQuery Mobile的初始化事件
Dec 03 Javascript
javascript 继承学习心得总结
Mar 17 Javascript
javascript实现简单计算器效果【推荐】
Apr 19 Javascript
JavaScript实现弹窗效果代码分析
Mar 09 Javascript
作为老司机使用 React 总结的 11 个经验教训
Apr 08 Javascript
使用vux实现上拉刷新功能遇到的坑
Feb 08 Javascript
angular4 获取wifi列表中文显示乱码问题的解决
Oct 20 Javascript
vue中的mvvm模式讲解
Jan 31 Javascript
详解webpack的proxyTable无效的解决方案
Jun 15 #Javascript
vue中axios的封装问题(简易版拦截,get,post)
Jun 15 #Javascript
vue和webpack打包项目相对路径修改的方法
Jun 15 #Javascript
webpack公共组件引用路径简化小技巧
Jun 15 #Javascript
微信小程序自定义tab实现多层tab嵌套功能
Jun 15 #Javascript
微信小程序实现自定义modal弹窗封装的方法
Jun 15 #Javascript
详解vue组件开发脚手架
Jun 15 #Javascript
You might like
深入php处理整数函数的详解
2013/06/09 PHP
php5.2以下版本无json_decode函数的解决方法
2014/05/25 PHP
关于PHP内置的字符串处理函数详解
2017/02/04 PHP
yii2多图上传组件的使用教程
2018/05/10 PHP
在textarea中屏蔽js的某个function的javascript代码
2007/04/20 Javascript
javascript中style.left和offsetLeft的用法说明
2014/03/07 Javascript
JS实现浏览器状态栏文字从右向左弹出效果代码
2015/10/27 Javascript
详解Angular的内置过滤器和自定义过滤器【推荐】
2016/12/26 Javascript
JS实现动态修改table及合并单元格的方法示例
2017/02/20 Javascript
JavaScript实现一个空中避难的小游戏
2017/06/06 Javascript
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
2018/03/28 jQuery
Nodejs异步回调之异常处理实例分析
2018/06/22 NodeJs
js canvas实现5张图片合成一张图片
2019/07/15 Javascript
javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法
2020/05/14 Javascript
[02:05]2014DOTA2西雅图邀请赛 老队长全明星大猜想谁不服就按进显示器
2014/07/08 DOTA
[57:47]Fnatic vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[01:20:47]DOTA2-DPC中国联赛 正赛 Ehome vs Magma BO3 第一场 1月19日
2021/03/11 DOTA
ssh批量登录并执行命令的python实现代码
2012/05/25 Python
python中range()与xrange()用法分析
2016/09/21 Python
python按行读取文件,去掉每行的换行符\n的实例
2018/04/19 Python
浅析Python装饰器以及装饰器模式
2018/05/28 Python
python+POP3实现批量下载邮件附件
2018/06/19 Python
python语言基本语句用法总结
2019/06/11 Python
python生成requirements.txt的两种方法
2019/09/18 Python
基于python实现计算两组数据P值
2020/07/10 Python
Python3+PyCharm+Django+Django REST framework配置与简单开发教程
2021/02/16 Python
html5中canvas学习笔记2-判断浏览器是否支持canvas
2013/01/06 HTML / CSS
西班牙自行车和跑步商店:Alltricks
2018/07/07 全球购物
网络安全方面的面试题
2015/11/04 面试题
理财投资建议书
2014/03/12 职场文书
大学生就业自我推荐信
2014/05/10 职场文书
合作协议书范文
2014/08/20 职场文书
一年级语文上册复习计划
2015/01/17 职场文书
会议主持词开场白
2015/05/28 职场文书
Python快速优雅的批量修改Word文档样式
2021/05/20 Python
再次探讨go实现无限 buffer 的 channel方法
2021/06/13 Golang