起首,协定、主机名和端口号雷同叫同源。同源战略许可页面从同一个站点加载和实行特定的剧本。站外其他泉源的剧本同页面的交互则被严厉限定。要处理这个题目就须要跨域,本文引见处理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)也能发送跨域要求,而且能够在浏览器中采纳规范的安全战略。