使用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 相关文章推荐
combox改进版 页面原型参考dojo的,比网上jQuery的那些combox功能强,代码更小
Apr 15 Javascript
JavaScript中链式调用之研习
Apr 07 Javascript
javascript之typeof、instanceof操作符使用探讨
May 19 Javascript
js实现身份证号码验证的简单实例
Feb 19 Javascript
js实现跨域的4种实用方法原理分析
Oct 29 Javascript
微信小程序 实战程序简易新闻的制作
Jan 09 Javascript
微信小程序 rich-text的使用方法
Aug 04 Javascript
vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解
May 28 Javascript
vue实现动态显示与隐藏底部导航的方法分析
Feb 11 Javascript
jquery实现商品sku多属性选择功能(商品详情页)
Dec 20 jQuery
Vue基于iview实现登录密码的显示与隐藏功能
Mar 06 Javascript
小程序使用分包的示例代码
Mar 23 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
php日历[测试通过]
2008/03/27 PHP
php守护进程 加linux命令nohup实现任务每秒执行一次
2011/07/04 PHP
PHP图片自动裁切应付不同尺寸的显示
2014/10/16 PHP
php简单实现发送带附件的邮件
2015/06/10 PHP
利用PHP获取汉字首字母并且分组排序详解
2017/10/22 PHP
YII2框架中日志的配置与使用方法实例分析
2020/03/18 PHP
javascript学习笔记(十四) window对象使用介绍
2012/06/20 Javascript
js时间比较 js计算时间差的简单实现方法
2016/08/26 Javascript
前端开发之CSS原理详解
2017/03/11 Javascript
深入浅出es6模板字符串
2017/08/26 Javascript
Vue DevTools调试工具的使用
2017/12/05 Javascript
你可能不知道的前端算法之文字避让(inMap)
2018/01/12 Javascript
利用Electron简单撸一个Markdown编辑器的方法
2019/06/10 Javascript
Vue 动态组件components和v-once指令的实现
2019/08/30 Javascript
微信小程序和H5页面间相互跳转代码实例
2019/09/19 Javascript
vue3+typeScript穿梭框的实现示例
2020/12/29 Vue.js
利用Python如何生成随机密码
2016/04/20 Python
PyQt5实现拖放功能
2018/04/25 Python
Python整数对象实现原理详解
2019/07/01 Python
一文秒懂python读写csv xml json文件各种骚操作
2019/07/04 Python
python 根据网易云歌曲的ID 直接下载歌曲的实例
2019/08/24 Python
Pyqt5自适应布局实例
2019/12/13 Python
使用Pandas将inf, nan转化成特定的值
2019/12/19 Python
python 实现list或string按指定分段
2019/12/25 Python
解决Django Haystack全文检索为空的问题
2020/05/19 Python
Python HTMLTestRunner测试报告view按钮失效解决方案
2020/05/25 Python
如何基于pandas读取csv后合并两个股票
2020/09/25 Python
CSS3之边框多颜色Border-color属性使用示例
2013/10/11 HTML / CSS
特步官方商城:Xtep
2017/03/21 全球购物
奖学金自我鉴定范文
2013/10/03 职场文书
求职自荐信怎么写
2014/03/06 职场文书
高考标语大全
2014/06/05 职场文书
关爱残疾人标语
2014/06/25 职场文书
小学教师见习总结
2015/06/23 职场文书
win10安装配置nginx的过程
2021/03/31 Servers
基于tensorflow权重文件的解读
2021/05/26 Python