AngularJs解決跨域簡單介紹

螞蟻小編發表於2017-04-14
AngularJS跨域

下面直接進入主題介紹一下如何解決此問題。先看客戶端是如何請求資料的：

程式碼是寫在a.com域名下面的

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script src="angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('app', []);
app.controller('appCtrl', ['$scope', function ($scope) {
  $http({
    method: 'JSONP',
    url: 'http://www.b.com/test.php?callback=JSON_CALLBACK',
  }).success(function (msg) {
    console.log(data);
  });
  //或者
  $http
  .jsonp('http://www.b.com/test.php?callback=JSON_CALLBACK')
  .success(function (msg){
    console.log(msg);
  }); 
}]);
</script>
</head>
<body>
</body>
</html>

我們看到，這裡是直接以jsonp的形式進行跨域請求的，其操作同jquery中對跨域的請求方式如出一轍。

注意，我們的callback是固定的，即JSON_CALLBACK，儘量不要去做任何改動

我們再看服務端b.com中的test.php對請求資料的處理方式，這裡以原生php的方式做參考

[PHP] 純文字檢視 複製程式碼
$callBack = isset($_GET['callback']) ? $_GET['callback'] : DEFAULT_CALLBACK;
exit($callBack.'('.json_encode($data).')');

我們再回來看看客戶端console.log記錄的結果:

a:3:{s:3:\"pic\";s:43:\"portal/201704/14/131644mr5rjmp769g0r77w.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

由此可見，跨域已經成功，總結如下:

（1）.客戶端跨域請求的url後追加的引數是?callback=JSON_CALLBACK，引數callback的值指定為JSON_CALLBACK，注意是大寫，就是JSON_CALLBACK不要作任何改動，感覺這裡是個不小的坑，?callback的值稍作改動，客戶端就需要全域性定義callback函式，而且還特麼怎麼再傳給$scope處理？為了避免不必要的麻煩，這裡建議就這麼搞。

（2）.再看服務端，服務端需要指定$callBack = $_GET['callback'];接收callback,而且你還會發現接收的callback不是我們客戶端寫的?callback的值，客戶端指定JSON_CALLBACK應該是為了觸發angularJs內部的機制。

相關文章