详解基于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 相关文章推荐
De facto standard 世界上不可思议的事实标准
Aug 29 Javascript
ie6下png图片背景不透明的解决办法使用js实现
Jan 11 Javascript
js弹出框轻量级插件jquery.boxy使用介绍
Jan 15 Javascript
js中匿名函数的创建与调用方法分析
Dec 19 Javascript
jQuery实现新消息闪烁标题提示的方法
Mar 11 Javascript
基于JavaScript如何实现私有成员的语法特征及私有成员的实现方式
Oct 28 Javascript
基于jQuery插件jqzoom实现的图片放大镜效果示例
Jan 23 Javascript
javaScript和jQuery自动加载简单代码实现方法
Nov 24 jQuery
Vue的实例、生命周期与Vue脚手架(vue-cli)实例详解
Dec 27 Javascript
JS实现二维数组横纵列转置的方法
Apr 17 Javascript
vue项目中添加单元测试的方法
Jul 21 Javascript
vue 使用async写数字动态加载效果案例
Jul 18 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
正则表达式语法
2006/10/09 Javascript
PHP面向对象之领域模型+数据映射器实例(分析)
2017/06/21 PHP
PHP中register_shutdown_function函数的基础介绍与用法详解
2017/11/28 PHP
js 获取子节点函数 (兼容FF与IE)
2010/04/18 Javascript
使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体
2013/01/15 Javascript
jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏)
2013/05/08 Javascript
JavaScript限定复选框的选择个数示例代码
2013/08/25 Javascript
JS嵌套函数调用上下文的问题解决
2014/03/26 Javascript
jQuery中scrollTop()方法用法实例
2015/01/16 Javascript
jQuery动画效果图片轮播特效
2016/01/12 Javascript
【经验总结】编写JavaScript代码时应遵循的14条规律
2016/06/20 Javascript
JS得到当前时间的方法示例
2017/03/24 Javascript
Vuex之理解Getters的用法实例
2017/04/19 Javascript
JS判断时间段的实现代码
2017/06/14 Javascript
nodejs实现截取上传视频中一帧作为预览图片
2017/12/10 NodeJs
使用jquery Ajax实现上传附件功能
2018/10/23 jQuery
浅析Vue.js中v-bind v-model的使用和区别
2018/12/04 Javascript
快速搭建Node.js(Express)用户注册、登录以及授权的方法
2019/05/09 Javascript
[01:47]2018年度DOTA2最佳教练-完美盛典
2018/12/16 DOTA
python字典键值对的添加和遍历方法
2016/09/11 Python
Python新手入门最容易犯的错误总结
2017/04/24 Python
python使用response.read()接收json数据的实例
2018/12/19 Python
python3+PyQt5 自定义窗口部件--使用窗口部件样式表的方法
2019/06/26 Python
python为QT程序添加图标的方法详解
2020/03/09 Python
html5实现的便签特效(实战分享)
2013/11/29 HTML / CSS
详解HTML5常用的语义化标签
2019/09/27 HTML / CSS
AmazeUI 面板的实现示例
2020/08/17 HTML / CSS
含精油的天然有机化妆品:Indemne
2019/08/27 全球购物
在weblogic中发布ejb需涉及到哪些配置文件
2012/01/17 面试题
医院护士专业个人的求职信
2013/12/09 职场文书
大学生村官演讲稿
2014/04/25 职场文书
作风建设年活动总结
2014/08/27 职场文书
离婚财产分隔协议书
2014/10/23 职场文书
2015年学生会干事工作总结
2015/04/09 职场文书
Sql-Server数据库单表查询 4.3实验课
2021/04/05 SQL Server
redis实现排行榜功能
2021/05/24 Redis