前言

開(kāi)始本文之前，大家應(yīng)該首先了解，協(xié)議、主機(jī)名和端口號(hào)相同叫同源。同源策略允許頁(yè)面從同一個(gè)站點(diǎn)加載和執(zhí)行特定的腳本。站外其他來(lái)源的腳本同頁(yè)面的交互則被嚴(yán)格限制。

要解決這個(gè)問(wèn)題就需要跨域，本文介紹解決angular中的跨域的三種方式：

一、JSONP

JSONP的原理是通過(guò) <script> 標(biāo)簽發(fā)起一個(gè)GET請(qǐng)求來(lái)取代XHR請(qǐng)求。JSONP生成一個(gè)<script> 標(biāo)簽并插到DOM中，然后瀏覽器會(huì)接管并向 src 屬性所指向的地址發(fā)送請(qǐng)求。當(dāng)服務(wù)器返回請(qǐng)求時(shí)， 響應(yīng)結(jié)果會(huì)被包裝成一個(gè)JavaScript函數(shù)， 并由該請(qǐng)求所對(duì)應(yīng)的回調(diào)函數(shù)調(diào)用。

AngularJS在 $http 服務(wù)中提供了一個(gè)JSONP輔助函數(shù)。 通過(guò) $http 服務(wù)的 jsonp 方法可以發(fā)送請(qǐng)求，如下所示：

  $http
  .jsonp("https://api.github.com?callback=JSON_CALLBACK") .success(function(data) {
  // 數(shù)據(jù)
  });

因?yàn)檎?qǐng)求是由 <script> 標(biāo)簽發(fā)送的，所以這個(gè)方法只能發(fā)送GET請(qǐng)求。

二、使用 CORS
CORS規(guī)范簡(jiǎn)單地?cái)U(kuò)展了標(biāo)準(zhǔn)的XHR對(duì)象，以允許JavaScript發(fā)送跨域的XHR請(qǐng)求。它會(huì)通過(guò)預(yù)檢查（preflight）來(lái)確認(rèn)是否有權(quán)限向目標(biāo)服務(wù)器發(fā)送請(qǐng)求。預(yù)檢查可以讓服務(wù)器接受或拒絕來(lái)自全部服務(wù)器、特定服務(wù)器或一組服務(wù)器的請(qǐng)求。這意味著客戶端和服務(wù)端應(yīng)用需要協(xié)同工作，才能向客戶端或服務(wù)器發(fā)送數(shù)據(jù)。

首先需要告訴AngularJS我們正在使用CORS。使用 config()方法在應(yīng)用模塊上設(shè)置兩個(gè)參數(shù)以達(dá)到此目的。

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

接下來(lái)，需要服務(wù)端設(shè)置響應(yīng)頭，這個(gè)需要和后端人員鏡像
Access-Control-Allow-Origin 這個(gè)頭的值可以是與請(qǐng)求頭的值相呼應(yīng)的值，為*表示允許接收從任何來(lái)源發(fā)來(lái)的請(qǐng)求。
Access-Control-Allow-Credentials 默認(rèn)情況下，CORS請(qǐng)求不會(huì)發(fā)送cookie。如果服務(wù)器返回了這個(gè)頭，那么就可以通過(guò)將withCredentials 設(shè)置為 true 來(lái)將cookie同請(qǐng)求一同發(fā)送出去。

接下來(lái)就可以使用下面的請(qǐng)求進(jìn)行跨域請(qǐng)求了

$http
.get("https://api.github.com")
.success(function(data) {
// 數(shù)據(jù)
});

三、服務(wù)器端代理這種方式更多的應(yīng)該是后端來(lái)做的實(shí)現(xiàn)向所有服務(wù)器發(fā)送請(qǐng)求的最簡(jiǎn)單方式是使用服務(wù)器端代理。

這個(gè)服務(wù)器和頁(yè)面處在同一個(gè)域中（或者不在同一個(gè)域中但支持CORS） ，做為所有遠(yuǎn)程資源的代理。可以簡(jiǎn)單地通過(guò)使用本地服務(wù)器來(lái)代替客戶端向外部資源發(fā)送請(qǐng)求， 并將響應(yīng)結(jié)果返回給客戶端。通過(guò)這種方式，老式瀏覽器不必使用需要發(fā)送額外請(qǐng)求的CORS（只有現(xiàn)代瀏覽器支持CORS）也能發(fā)送跨域請(qǐng)求，并且可以在瀏覽器中采用標(biāo)準(zhǔn)的安全策略。

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

最新評(píng)論