angular.js中解决跨域问题的三种方式


Posted in Javascript onJuly 12, 2017

前言

开始本文之前,大家应该首先了解,协议、主机名和端口号相同叫同源。同源策略允许页面从同一个站点加载和执行特定的脚本。站外其他来源的脚本同页面的交互则被严格限制。

要解决这个问题就需要跨域,本文介绍解决angular中的跨域的三种方式:

一、JSONP

JSONP的原理是通过 <script> 标签发起一个GET请求来取代XHR请求。JSONP生成一个<script> 标签并插到DOM中,然后浏览器会接管并向 src 属性所指向的地址发送请求。当服务器返回请求时, 响应结果会被包装成一个JavaScript函数, 并由该请求所对应的回调函数调用。

AngularJS在 $http 服务中提供了一个JSONP辅助函数。 通过 $http 服务的 jsonp 方法可以发送请求,如下所示:

$http
  .jsonp("https://api.github.com?callback=JSON_CALLBACK") .success(function(data) {
  // 数据
  });

因为请求是由 <script> 标签发送的,所以这个方法只能发送GET请求。

二、使用 CORS
CORS规范简单地扩展了标准的XHR对象,以允许JavaScript发送跨域的XHR请求。它会通过预检查(preflight)来确认是否有权限向目标服务器发送请求。预检查可以让服务器接受或拒绝来自全部服务器、特定服务器或一组服务器的请求。这意味着客户端和服务端应用需要协同工作,才能向客户端或服务器发送数据。

首先需要告诉AngularJS我们正在使用CORS。使用 config()方法在应用模块上设置两个参数以达到此目的。

angular.module('myApp', [])
.config(function($httpProvider) {
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers
.common['X-Requested-With'];
});

接下来,需要服务端设置响应头,这个需要和后端人员镜像
Access-Control-Allow-Origin 这个头的值可以是与请求头的值相呼应的值,为*表示允许接收从任何来源发来的请求。
Access-Control-Allow-Credentials 默认情况下,CORS请求不会发送cookie。如果服务器返回了这个头,那么就可以通过将withCredentials 设置为 true 来将cookie同请求一同发送出去。

接下来就可以使用下面的请求进行跨域请求了

$http
.get("https://api.github.com")
.success(function(data) {
// 数据
});

三、服务器端代理这种方式更多的应该是后端来做的实现向所有服务器发送请求的最简单方式是使用服务器端代理。

这个服务器和页面处在同一个域中(或者不在同一个域中但支持CORS) ,做为所有远程资源的代理。可以简单地通过使用本地服务器来代替客户端向外部资源发送请求, 并将响应结果返回给客户端。通过这种方式,老式浏览器不必使用需要发送额外请求的CORS(只有现代浏览器支持CORS)也能发送跨域请求,并且可以在浏览器中采用标准的安全策略。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
window.open()弹出居中的窗口
Feb 01 Javascript
jQuery is()函数用法3例
May 06 Javascript
原生js的弹出层且其内的窗口居中
May 14 Javascript
javascript中定义类的方法汇总
Dec 28 Javascript
JavaScript的设计模式经典之代理模式
Feb 24 Javascript
AngularJS中run方法的巧妙运用
Jan 04 Javascript
Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法
Jul 09 Javascript
JS写XSS cookie stealer来窃取密码的步骤详解
Nov 20 Javascript
javascript性能优化之分时函数的介绍
Mar 28 Javascript
javascript自定义右键菜单插件
Dec 16 Javascript
vue+element_ui上传文件,并传递额外参数操作
Dec 05 Vue.js
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
Jan 22 Vue.js
JavaScript+HTML5实现的日期比较功能示例
Jul 12 #Javascript
JavaScript实现设置默认日期范围为最近40天的方法分析
Jul 12 #Javascript
Bootstrap提示框效果的实例代码
Jul 12 #Javascript
JavaScript输出所选择起始与结束日期的方法
Jul 12 #Javascript
微信小程序三级联动地址选择器的实例代码
Jul 12 #Javascript
微信小程序 共用变量值的实现
Jul 12 #Javascript
JS中LocalStorage与SessionStorage五种循序渐进的使用方法
Jul 12 #Javascript
You might like
安装apache2.2.22配置php5.4(具体操作步骤)
2013/06/26 PHP
微信支付开发维权通知实例
2016/07/12 PHP
php 后端实现JWT认证方法示例
2018/09/04 PHP
Yii2.0框架behaviors方法使用实例分析
2019/09/30 PHP
JQuery 常用方法基础教程
2009/02/06 Javascript
利用js获取服务器时间的两个简单方法
2010/01/08 Javascript
Javascript创建Silverlight Plugin以及自定义nonSilverlight和lowSilverlight样式
2010/06/28 Javascript
jquery获取div距离窗口和父级dv的距离示例
2013/10/10 Javascript
js 触发select onchange事件代码
2014/03/20 Javascript
jQuery中的编程范式详解
2014/12/15 Javascript
JS表的模拟方法
2015/02/05 Javascript
使用AngularJS处理单选框和复选框的简单方法
2015/06/19 Javascript
BootStrap使用popover插件实现鼠标经过显示并保持显示框
2016/06/23 Javascript
Boostrap实现的登录界面实例代码
2016/10/09 Javascript
基于代数方程库Algebra.js解二元一次方程功能示例
2017/06/09 Javascript
element-ui多文件上传的实现示例
2019/04/10 Javascript
vue-router之实现导航切换过渡动画效果
2019/10/31 Javascript
javascript/jquery实现点击触发事件的方法分析
2019/11/11 jQuery
python Django模板的使用方法
2016/01/14 Python
python中如何使用正则表达式的集合字符示例
2017/10/09 Python
Python入门之三角函数sin()函数实例详解
2017/11/08 Python
python 文本单词提取和词频统计的实例
2018/12/22 Python
解决python彩色螺旋线绘制引发的问题
2019/11/23 Python
keras实现theano和tensorflow训练的模型相互转换
2020/06/19 Python
Python3+PyCharm+Django+Django REST framework配置与简单开发教程
2021/02/16 Python
分享CSS3中必须要知道的10个顶级命令
2012/04/26 HTML / CSS
蒂娜商店:Tiina the Store
2019/12/07 全球购物
简述数组与指针的区别
2014/01/02 面试题
2013的个人自我评价
2013/12/26 职场文书
ktv总经理岗位职责
2014/02/17 职场文书
大学中国梦演讲稿
2014/04/23 职场文书
班级光棍节联谊会策划书
2014/10/10 职场文书
首都博物馆观后感
2015/06/05 职场文书
2016年优秀共青团员事迹材料
2016/02/25 职场文书
什么是动态刷新率DRR? Windows11动态刷新率功能介绍
2021/11/21 数码科技
Spring this调用当前类方法无法拦截的示例代码
2022/03/20 Java/Android