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 相关文章推荐
推荐40个简单的 jQuery 导航插件和教程(下篇)
Sep 14 Javascript
JavaScript高级程序设计(第3版)学习笔记11 内建js对象
Oct 11 Javascript
javascript新建标签,判断键盘输入,以及判断焦点(示例代码)
Nov 25 Javascript
JavaScript排序算法之希尔排序的2个实例
Apr 04 Javascript
模拟用户点击弹出新页面不会被浏览器拦截
Apr 08 Javascript
jQuery中$.get、$.post、$.getJSON和$.ajax的用法详解
Nov 19 Javascript
JavaScript中解决多浏览器兼容性23个问题的快速解决方法
May 19 Javascript
AngularJS实现按钮提示与点击变色效果
Sep 07 Javascript
深入理解JavaScript中的预解析
Jan 04 Javascript
一篇文章带你浅入webpack的DLL优化打包
Feb 20 Javascript
如何使用jQuery操作Cookies方法解析
Sep 08 jQuery
Javascript实现贪吃蛇小游戏(含详细注释)
Oct 23 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备份数据库生成SQL文件并下载的函数代码
2012/02/05 PHP
Codeigniter实现多文件上传并创建多个缩略图
2014/06/12 PHP
ecshop实现smtp发送邮件
2015/02/03 PHP
浅谈PHP拦截器之__set()与__get()的理解与使用方法
2016/10/18 PHP
Thinkphp实现站点静态化的方法详解
2017/03/21 PHP
高亮显示web页表格行的javascript代码
2010/11/19 Javascript
javascript中如何处理引号编码"
2013/08/15 Javascript
js中switch case循环实例代码
2013/12/30 Javascript
JavaScript 事件对象介绍
2015/04/13 Javascript
javascript中if和switch,==和===详解
2015/07/30 Javascript
JavaScript 性能优化小结
2015/10/12 Javascript
jQuery实现元素拖拽并cookie保存顺序的方法
2016/02/20 Javascript
jQuery的each循环用法简单示例
2016/06/12 Javascript
移动端js图片查看器
2016/11/17 Javascript
Angularjs 双向绑定时字符串的转换成数字类型的问题
2017/06/12 Javascript
Javascript刷新页面的实例
2017/09/23 Javascript
Electron 如何调用本地模块的方法
2019/02/01 Javascript
利用JS如何获取form表单数据
2019/12/19 Javascript
JS实现星星海特效
2019/12/24 Javascript
JS highcharts动态柱状图原理及实现
2020/10/16 Javascript
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
2021/03/01 Vue.js
压缩包密码破解示例分享(类似典破解)
2014/01/17 Python
对python中的xlsxwriter库简单分析
2018/05/04 Python
python使用turtle库绘制树
2018/06/25 Python
Python3搭建http服务器的实现代码
2020/02/11 Python
Python实现动态给类和对象添加属性和方法操作示例
2020/02/29 Python
Python 多线程共享变量的实现示例
2020/04/17 Python
Win10下配置tensorflow-gpu的详细教程(无VS2015/2017)
2020/07/14 Python
高中的自我鉴定
2013/12/16 职场文书
公司年会主持词
2014/03/22 职场文书
加入学生会演讲稿
2014/04/24 职场文书
细节决定成败演讲稿
2014/05/12 职场文书
计生工作先进事迹
2014/08/15 职场文书
2014年幼儿园后勤工作总结
2014/11/10 职场文书
用React Native制作一个简单的游戏引擎
2021/05/27 Javascript
python中取整数的几种方法
2021/11/07 Python