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

  

  

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

  

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

  


  

  

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

  

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

        http美元   .jsonp (https://api.github.com& # 63;调=JSON_CALLBACK) .success(功能(数据){//数据   });      

因为请求是由& lt; script>标签发送的,所以这个方法只能发送得到请求。
  

  


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

  

首先需要告诉AngularJS我们正在使用歌珥。使用<代码>配置()方法在应用模块上设置两个参数以达到此目的。
  

        角。模块(“myApp”, [])   过程(函数(httpProvider美元){   美元httpProvider.defaults.useXDomain=true;   删除httpProvider.defaults.headers美元   .common [' X-Requested-With '];   });      

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

  

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

        http美元   . get (" https://api.github.com ")   .success(功能(数据){//数据   });      

  

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

  

  

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

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