使用webpack-dev-server处理跨域请求的方法


Posted in Javascript onApril 18, 2018

在前端调试的时候,跨域一直都是一个比较麻烦的问题,这个在之前的文章 关于跨域问题的一个解决方法 中其实已经讨论了一些可以使用的方法。

如果要使用 JSONP,第一是需要修改的地方比较多,而且也不太符合前端发展的大趋势,如果使用 CORS 的话并没有 application/json 类型。而且更重要的是这只是在前端调试时候的需求,并不是在上线以后的需求,所以对后端有太多的入侵也不好。

所以就有一个念想突然在大脑中闪过——加入有一个代理不就可以解决这个问题了?但是又想了一下写起来还挺麻烦,于是就被搁置了。

直到前几天 Stone 提到其实 webpack-dev-server 早就想到并且已经帮我们实现了。

于是,我就在一个 Vue 项目中进行测试,发现真的很赞,既可以本地 Server 热加载,还可以直接跨域调用远程 API,完美解决了之前遇到的所有问题。

接下来我简要介绍一下步骤(以一个 Vue 脚手架建立的 webpack 项目为例):

首先检查 build/webpack.dev.conf.js 中是否有

proxy: config.dev.proxyTable,

这个配置项,如果被注释掉,请打开注释,如果没有,请加入到 devServer 对象中

然后在 config/index.js 中的 dev 对象中加入 proxyTable 配置项:

proxyTable: {
   '/**': {
    target: 'http://api.xxx.com',
    changeOrigin: true,
    secure: false
   }
  },

前面的键 /** 意思是代理所有请求,如果代理某些请求,可以将其改为诸如 /api 之类的字符串。

后面的 target 就是要代理到的网站,changeOrigin 的意思就是把 http 请求中的 Origin 字段进行变换,在浏览器接收到后端回复的时候,浏览器会以为这是本地请求,而在后端那边会以为是在站内的调用。

这样,通过这个简单的配置,就完美地解决了跨域的问题。

之后,在直接运行

npm run dev

的时候,就可以将测试前端中的 ajax 请求代理到后端服务器进行测试啦!

最后,贴上官方文档,具体的配置大家可以参考这里:

https://webpack.js.org/configuration/dev-server/#devserver-proxy

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

Javascript 相关文章推荐
javascript Demo模态窗口
Dec 06 Javascript
javascript检测浏览器flash版本的实现代码
Dec 06 Javascript
jquery 多行文本框(textarea)高度变化
Jul 03 Javascript
js精美的幻灯片画集特效代码分享
Aug 29 Javascript
详谈JS中实现种子随机数及作用
Jul 19 Javascript
AngularJs ng-repeat 嵌套如何获取外层$index
Sep 21 Javascript
jquery精度计算代码 jquery指定精确小数位
Feb 06 Javascript
Vue 父子组件、组件间通信
Mar 08 Javascript
React复制到剪贴板的示例代码
Aug 22 Javascript
Angular实现的进度条功能示例
Feb 18 Javascript
详解vue 计算属性与方法跟侦听器区别(面试考点)
Apr 23 Javascript
ES6基础之解构赋值(destructuring assignment)
Feb 21 Javascript
详解webpack-dev-server 设置反向代理解决跨域问题
Apr 18 #Javascript
jQuery实现的两种简单弹窗效果示例
Apr 18 #jQuery
vue双向数据绑定知识点总结
Apr 18 #Javascript
浅析vue中常见循环遍历指令的使用 v-for
Apr 18 #Javascript
关于Angularjs中跨域设置白名单问题
Apr 17 #Javascript
JS实现二维数组横纵列转置的方法
Apr 17 #Javascript
redux中间件之redux-thunk的具体使用
Apr 17 #Javascript
You might like
Yii2实现中国省市区三级联动实例
2017/02/08 PHP
Js与下拉列表处理问题解决
2014/02/13 Javascript
jQuery拖拽div实现思路
2014/02/19 Javascript
node爬取微博的数据的简单封装库nodeweibo使用指南
2015/01/02 Javascript
JavaScript中的对象和原型(一)
2016/08/12 Javascript
原生Javascript插件开发实践
2017/01/18 Javascript
jquery实现企业定位式导航效果
2018/01/01 jQuery
js实现控制文件拖拽并获取拖拽内容功能
2018/02/17 Javascript
Angular实现模版驱动表单的自定义校验功能(密码确认为例)
2018/05/17 Javascript
vue2.0 路由模式mode="history"的作用
2018/10/18 Javascript
Electron-vue脚手架改造vue项目的方法
2018/10/22 Javascript
微信小程序实现底部导航
2018/11/05 Javascript
微信小程序登录数据解密及状态维持实例详解
2019/05/06 Javascript
关于layui 实现点击按钮添加一行(方法渲染创建的table)
2019/09/29 Javascript
浅析webpack-bundle-analyzer在vue-cli3中的使用
2019/10/23 Javascript
JavaScript实现京东快递单号查询
2020/11/30 Javascript
Python中的startswith和endswith函数使用实例
2014/08/25 Python
python编程实现希尔排序
2017/04/13 Python
TensorFlow安装及jupyter notebook配置方法
2017/09/08 Python
Python分析彩票记录并预测中奖号码过程详解
2019/07/09 Python
Python 经典算法100及解析(小结)
2019/09/13 Python
在Windows上安装和配置 Jupyter Lab 作为桌面级应用程序教程
2020/04/22 Python
Python API 操作Hadoop hdfs详解
2020/06/06 Python
Python 利用Entrez库筛选下载PubMed文献摘要的示例
2020/11/24 Python
使用CSS3代码绘制可爱的Hello Kitty猫
2016/08/03 HTML / CSS
GAP欧盟网上商店:GAP EU
2016/09/13 全球购物
日本最大级玩偶手办购物:あみあみ Amiami
2018/04/23 全球购物
世界上最大的隐形眼镜商店:1-800 Contacts
2018/11/03 全球购物
数据库专业英语
2012/11/30 面试题
车间统计员岗位职责
2014/01/05 职场文书
《海伦?凯勒》教学反思
2014/04/17 职场文书
学生上课看漫画的检讨书
2014/09/26 职场文书
《丑小鸭》教学反思
2016/02/19 职场文书
Nginx工作原理和优化总结。
2021/04/02 Servers
Sql-Server数据库单表查询 4.3实验课
2021/04/05 SQL Server
详细介绍python类及类的用法
2021/05/31 Python