详解基于angular-cli配置代理解决跨域请求问题


Posted in Javascript onJuly 05, 2017

1.跨域请求产生

随着不同终端(Pad/Mobile/PC)的兴起,对开发人员的要求越来越高,纯浏览器端的响应式已经不能满足用户体验的高要求,我们往往需要针对不同的终端开发定制的版本。为了提升开发效率,前后端分离的需求越来越被重视,后端负责业务/数据接口,前端负责展现/交互逻辑,同一份数据接口,我们可以定制开发多个版本。

而前后端分离带来的一个问题就是前端web部署的服务器和后端提供服务的服务器大概率不在同一个域名下,进而会产生跨域问题。

2.通用解决方案

如果浏览器支持HTML5,那么就可以一劳永逸地使用新的跨域策略:CORS了。

CORS全称Cross-Origin Resource Sharing,是html5规范定义的如何跨域访问资源。

了解CORS前,我们先搞明白概念:

Origin表示本域,也就是浏览器当前页面的域。当JavaScript向外域(如sina.com)发起请求后,浏览器收到响应后,首先检查Access-Control-Allow-Origin是否包含本域,如果是,则此次跨域请求成功,如果不是,则请求失败,javascript将无法获取到响应的任何数据。

用一个图来表示就是:

详解基于angular-cli配置代理解决跨域请求问题

假设本域是my.com,外域是sina.com,只要响应头Access-Control-Allow-Origin为http://my.com,或者是*,本次请求就可以成功。

可见,跨域能否成功,取决于对方服务器是否愿意给你设置一个正确的Access-Control-Allow-Origin,决定权始终在对方手中。

上面这种跨域请求,称之为“简单请求”。简单请求包括GET、HEAD和POST(POST的Content-Type类型仅限application/x-www-form-urlencoded、multipart/form-data和text/plain),并且不能出现任何自定义头(例如,X-Custom: 12345),通常能满足90%的需求。

无论你是否需要用JavaScript通过CORS跨域请求资源,你都要了解CORS的原理。最新的浏览器全面支持Html5。在引用外域资源时,除了JavaScript和CSS外,都要验证CORS。

浏览器确认服务器响应的Access-Control-Allow-Methods头确实包含将要发送的AJAX请求的Method,才会继续发送AJAX,否则,抛出一个错误。

由于以POST、PUT方式传送JSON格式的数据在REST中很常见,所以要跨域正确处理POST和PUT请求,服务器端必须正确响应OPTIONS请求。

需要深入了解CORS的童鞋请移步W3C文档。

3.angular-cli代理配置解决跨域请求问题

使用CORS的确是可以很好的解决跨域问题,但是需要后端开发人员配合,如果想在不修改后端代码的前提下解决问题,配置代理绝对是不二选择。

使用tomcat、nginx…配置代理当然可以,但是麻烦,需要先打包代码再部署到nginx(或者其他)中,才能测试使用,为了保证开发效率,我们希望代码能够即写即测,这时在angular-cli中配置代理的优势就先露无疑。

在angular的开发中,angular-cli非常的方便,强烈推荐使用,今天我们主要讲述一下angular-cli如何通过配置代理解决跨域请求问题。

需要了解angular-cli的童鞋请移步angular-cli 官方文档

假如你现在已经使用angular-cli构建你的项目,并且程序正常运行,那么我们现在开始配置cli的代理:

1.首先我们创建代理配置文件proxy.conf.json

假如你的后端服务的访问地址为“10.4.60.200:8080”,以下为proxy.conf.json的例子:

{
 "/api": {
 "target": "http://10.4.60.200:8080",
 "secure": false
 }
}

2.改写package.json

修改启动命令,默认使用npm start时使用代理文件配置的代理

"start": "ng serve --proxy-config proxy.conf.json",

此时此刻当你再使用npm strat启动angular项目时,代理已经配置好了,我们还是以上面的服务url为例,如果原先你需要访问http://10.4.60.200:8080/api/server获取服务,那么现在你只需要把代码中的“10.4.60.200:8080”改为“localhost:4200”即可(cli默认端口为4200,根据自己的启动端口编写)。

此时你的所有服务请求在浏览器看来都是同域请求,不再存在跨域问题,上面所讲只是一个简单的例子,代理有很多参数可以选择配置,例如在代理时对cookie重写可以写为”cookieDomainRewrite”:”localhost”。

更多更详细的代理配置可以参考webpack-dev-server proxy settings

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

Javascript 相关文章推荐
jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
Apr 18 Javascript
基于jquery的监控数据是否发生改变
Apr 11 Javascript
js中通过split函数分割字符串成数组小例子
Sep 21 Javascript
关于img的href和src取变量及赋值的方法
Apr 28 Javascript
jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法
Feb 19 Javascript
Vue数据驱动模拟实现2
Jan 11 Javascript
jquery replace方法去空格
May 08 jQuery
vue实现百度搜索下拉提示功能实例
Jun 14 Javascript
详解Angular2 之 结构型指令
Jun 21 Javascript
微信小程序input框中加入小图标的实现方法
Jun 19 Javascript
详解vue-cli 2.0配置文件(小结)
Jan 14 Javascript
node express使用HTML模板的方法示例
Aug 22 Javascript
微信小程序学习之数据处理详解
Jul 05 #Javascript
用node和express连接mysql实现登录注册的实现代码
Jul 05 #Javascript
Node.js利用js-xlsx处理Excel文件的方法详解
Jul 05 #Javascript
jQuery使用ajax_动力节点Java学院整理
Jul 05 #jQuery
jQuery扩展_动力节点Java学院整理
Jul 05 #jQuery
jQuery选择器_动力节点Java学院整理
Jul 05 #jQuery
jQuery事件_动力节点Java学院整理
Jul 05 #jQuery
You might like
php 前一天或后一天的日期
2008/06/28 PHP
过滤掉PHP数组中的重复值的实现代码
2011/07/17 PHP
jQuery阻止同类型事件小结
2013/04/19 Javascript
jQuery获取和设置表单元素的方法
2014/02/14 Javascript
escape编码与unescape解码汉字出现乱码的解决方法
2014/07/02 Javascript
直接在JS里创建JSON数据然后遍历使用
2014/07/25 Javascript
用模版生成HTML的的框架jquery.tmpl使用详解
2015/01/07 Javascript
javascript实现根据3原色制作颜色选择器的方法
2015/07/17 Javascript
JavaScript实现下拉菜单的显示和隐藏
2016/01/05 Javascript
javascript类型系统 Array对象学习笔记
2016/01/09 Javascript
Node.js中Bootstrap-table的两种分页的实现方法
2017/09/18 Javascript
vue学习教程之带你一步步详细解析vue-cli
2017/12/26 Javascript
Fetch超时设置与终止请求详解
2019/05/18 Javascript
Vue.js如何使用Socket.IO的示例代码
2019/09/05 Javascript
JS中==、===你分清楚了吗
2020/03/04 Javascript
python解析文件示例
2014/01/23 Python
Python获取DLL和EXE文件版本号的方法
2015/03/10 Python
Python操作mysql数据库实现增删查改功能的方法
2018/01/15 Python
python 获取当天每个准点时间戳的实例
2018/05/22 Python
如何用Python实现简单的Markdown转换器
2018/07/16 Python
python re库的正则表达式入门学习教程
2019/03/08 Python
基于Python实现视频的人脸融合功能
2020/06/12 Python
Python自动登录QQ的实现示例
2020/08/28 Python
Shein英国:女性时尚网上商店
2019/04/10 全球购物
巴西Mr. Cat在线商店:购买包包和鞋子
2019/09/08 全球购物
说出一些常用的类,包,接口
2014/09/22 面试题
金智子午JAVA面试题
2015/09/04 面试题
基层党组织公开承诺书
2014/03/28 职场文书
高中学生期末评语
2014/04/25 职场文书
办公室文员岗位职责范本
2014/06/12 职场文书
走群众路线学习心得体会
2014/10/31 职场文书
2015年世界环境日活动总结
2015/02/11 职场文书
2015年加油站工作总结
2015/05/13 职场文书
2016党员党章学习心得体会
2016/01/14 职场文书
Log4j.properties配置及其使用
2021/08/02 Java/Android
Python selenium绕过webdriver监测执行javascript
2022/04/12 Python