使用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 应用类库代码
Jun 02 Javascript
JS操作Cookie写入和读取实例代码
Oct 20 Javascript
推荐10个2014年最佳的jQuery视频插件
Nov 12 Javascript
jQuery使用empty()方法删除元素及其所有子元素的方法
Mar 26 Javascript
EasyUi combotree 实现动态加载树节点
Apr 01 Javascript
JavaScript弹窗基础篇
Apr 27 Javascript
jQuery层次选择器用法示例
Sep 09 Javascript
浅谈 Vue 项目优化的方法
Dec 16 Javascript
深入理解JS中Number(),parseInt(),parseFloat()三者比较
Aug 24 Javascript
fetch 如何实现请求数据
Dec 20 Javascript
手把手教你 CKEDITOR 4 扩展插件制作
Jun 18 Javascript
Vue实现todo应用的示例
Feb 20 Vue.js
详解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
PHP之变量、常量学习笔记
2008/03/27 PHP
MySQL连接数超过限制的解决方法
2011/07/17 PHP
PHP 万年历实现代码
2012/10/18 PHP
PHP执行linux命令常用函数汇总
2016/02/02 PHP
php模仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能(中)
2017/06/11 PHP
php微信公众号开发之快递查询
2018/10/20 PHP
php实现的数组转xml案例分析
2019/09/28 PHP
Javascript中的Split使用方法与技巧
2007/03/09 Javascript
jquery 指南/入门基础
2007/11/30 Javascript
javascript prototype,executing,context,closure
2008/12/24 Javascript
javascript 按回车键相应按钮提交事件
2009/11/02 Javascript
JavaScript DOM学习第六章 表单实例
2010/02/19 Javascript
javascript中的if语句使用介绍
2013/11/20 Javascript
Javascript与jQuery方法的隐藏与显示
2015/01/19 Javascript
bootstrap实现弹窗和拖动效果
2016/01/03 Javascript
关于js二维数组和多维数组的定义声明(详解)
2016/10/02 Javascript
JavaScript字符集编码与解码详谈
2017/02/02 Javascript
javascript的this关键字详解
2019/05/20 Javascript
解决使用layui的时候form表单中的select等不能渲染的问题
2019/09/18 Javascript
浅谈Layui的eleTree树式选择器使用方法
2019/09/25 Javascript
Python实现基本线性数据结构
2016/08/22 Python
详解基于python-django框架的支付宝支付案例
2019/09/23 Python
Python模块汇总(常用第三方库)
2019/10/07 Python
深入浅析Python 中的sklearn模型选择
2019/10/12 Python
python 遍历pd.Series的index和value
2019/11/26 Python
PyCharm+PyQt5+QtDesigner配置详解
2020/08/12 Python
基于OpenCV的网络实时视频流传输的实现
2020/11/15 Python
前端面试必备之CSS3的新特性
2017/09/05 HTML / CSS
使用phonegap进行本地存储的实现方法
2017/03/31 HTML / CSS
萨克斯第五大道的折扣店:Saks Fifth Avenue OFF 5TH
2016/08/25 全球购物
Chemist Warehouse官方海外旗舰店:澳洲第一连锁大药房
2017/08/25 全球购物
机械专业技术员求职信
2014/06/14 职场文书
2014年全国爱牙日宣传活动方案
2014/09/21 职场文书
检讨书范文1000字
2015/01/28 职场文书
Vue接口封装的完整步骤记录
2021/05/14 Vue.js
Python中的np.argmin()和np.argmax()函数用法
2021/06/02 Python