angular中的跨域问题

首先,协议、主机名和端口号相同叫同源。同源策略容许页面从同一个站点加载和执行特定的脚本。站外其余来源的脚本同页面的交互则被严格限制。要解决这个问题就须要跨域,本文介绍解决angular中的跨域的三种方式:git

  1. JSONPgithub

    JSONP的原理是经过 <script> 标签发起一个GET请求来取代XHR请求。JSONP生成一个<script> 标签并插到DOM中,而后浏览器会接管并向 src 属性所指向的地址发送请求。当服务器返回请求时, 响应结果会被包装成一个JavaScript函数, 并由该请求所对应的回调函数调用。
    AngularJS在 $http 服务中提供了一个JSONP辅助函数。 经过 $http 服务的 jsonp 方法能够发送
    请求,以下所示:json

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

    由于请求是由 <script> 标签发送的,因此这个方法只能发送GET请求。后端

  2. .使用 CORS
    CORS规范简单地扩展了标准的XHR对象,以容许JavaScript发送跨域的XHR请求。它会经过预检查(preflight)来确认是否有权限向目标服务器发送请求。预检查可让服务器接受或拒绝来自所有服务器、特定服务器或一组服务器的请求。这意味着客户端和服务端应用须要协同工做,才能向客户端或服务器发送数据。
    首先须要告诉AngularJS咱们正在使用CORS。使用 config()方法在应用模块上设置两个参数以达到此目的。api

    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) {
    // 数据
    });
  3. 服务器端代理
    这种方式更多的应该是后端来作的实现向全部服务器发送请求的最简单方式是使用服务器端代理。 这个服务器和页面处在同一个域中(或者不在同一个域中但支持CORS) ,作为全部远程资源的代理。能够简单地经过使用本地服务器来代替客户端向外部资源发送请求, 并将响应结果返回给客户端。经过这种方式,老式浏览器没必要使用须要发送额外请求的CORS(只有现代浏览器支持CORS)也能发送跨域请求,而且能够在浏览器中采用标准的安全策略。浏览器

相关文章
相关标签/搜索