使用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 相关文章推荐
用htc组件制作windows选项卡
Jan 13 Javascript
两种不同的方法实现js对checkbox进行全选和反选
May 13 Javascript
js星星评分效果
Jul 24 Javascript
Node.js实现在目录中查找某个字符串及所在文件
Sep 03 Javascript
javascript操作数组详解
Dec 17 Javascript
js实现获取div坐标的方法
Nov 16 Javascript
Bootstrap框架结合jQuery仿百度换肤功能实例解析
Sep 17 Javascript
Bootstrap路径导航与分页学习使用
Feb 08 Javascript
JS面试题大坑之隐式类型转换实例代码
Oct 14 Javascript
Vue插件从封装到发布的完整步骤记录
Feb 28 Javascript
vue实现倒计时获取验证码效果
Apr 17 Javascript
angular异步验证器防抖实例详解
Mar 31 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
Zend Framework实现自定义过滤器的方法
2016/12/09 PHP
php实现水印文字和缩略图的方法示例
2016/12/29 PHP
Thinkphp页面跳转设置跳转等待时间的操作
2019/10/16 PHP
php+layui数据表格实现数据分页渲染代码
2019/10/26 PHP
js调用flash的效果代码
2008/04/26 Javascript
js获取当前select 元素值的代码
2010/04/19 Javascript
javascript实现促销倒计时+fixed固定在底部
2013/09/18 Javascript
jQuery实现定时读取分析xml文件的方法
2015/07/16 Javascript
总结Node.js中的一些错误类型
2016/08/15 Javascript
Vue resource中的GET与POST请求的实例代码
2017/07/21 Javascript
bootstrap-Treeview实现级联勾选
2017/11/23 Javascript
Mac中安装nvm的教程分享
2017/12/11 Javascript
vue自定义filters过滤器
2018/04/26 Javascript
javascript实现视频弹幕效果(两个版本)
2019/11/28 Javascript
Vue Element校验validate的实例
2020/09/21 Javascript
Python列表append和+的区别浅析
2015/02/02 Python
python flask实现分页效果
2017/06/27 Python
Python安装图文教程 Pycharm安装教程
2018/03/27 Python
python文件操作之批量修改文件后缀名的方法
2018/08/10 Python
python urllib爬虫模块使用解析
2019/09/05 Python
原来我一直安装 Python 库的姿势都不对呀
2019/11/11 Python
python手写均值滤波
2020/02/19 Python
python利用xlsxwriter模块 操作 Excel
2020/10/14 Python
关于Python不换行输出和不换行输出end=““不显示的问题(亲测已解决)
2020/10/27 Python
Python调用SMTP服务自动发送Email的实现步骤
2021/02/07 Python
生物技术毕业生自荐信
2013/10/23 职场文书
学院书画协会部门岗位职责
2013/12/01 职场文书
化学教师教学反思
2014/01/17 职场文书
一月红领巾广播稿
2014/02/11 职场文书
《狼和小羊》教学反思
2014/04/20 职场文书
乡镇综治宣传月活动总结
2014/07/02 职场文书
中学生2014国庆节演讲稿:不屈的民族
2014/09/21 职场文书
民事诉讼代理授权委托书
2014/10/11 职场文书
2015年财务工作总结范文
2015/03/31 职场文书
为什么你写的height:100%不起作用
2021/05/10 HTML / CSS
vue代码分块和懒加载非必要资源文件
2022/04/11 Vue.js