前言

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

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

一、JSONP

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

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

  $http
  .jsonp("https://api.github.com") .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)也能发送跨域请求,并且可以在浏览器中采用标准的安全策略。

总结

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

标签:
angularjs,跨域问题,angularjs,跨域,angularjs解决跨域

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

评论“angular.js中解决跨域问题的三种方式”

暂无“angular.js中解决跨域问题的三种方式”评论...

P70系列延期,华为新旗舰将在下月发布

3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。

而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?

根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。