AngularJs解决跨域问题案例详解(简单方法)

首頁

web前端

js教程

AngularJs解决跨域问题案例详解(简单方法)_AngularJS

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 23, 2016 pm 01:15 PM

首先我们做点准备说明，不然你明白我说的是啥意思别人不明白，就算别人明白了那总有人不明白，那你要说了，我的意思是这个说明必须要做了，答案是必须的，为了更好的方便大家理解嘛。

我们以两个主域名或者一个主域名+一个二级域名为例，均可演示跨域问题。

客户端 a.com

服务端 b.com或者s.a.com

angularJs版本 V1.2.25

准备工作做得很充分嘛，就差把我们的编辑器是subline暴露出来了，这个一般人我是不告诉他滴。

有人嚷嚷了，这问题老早就有了，你现在提出来有啥意义呢？难不成你还能把花忽悠开了？嗯，我还真能把花写开了。看戏吧，我们本篇要上演的是完整版跨域实例。

接下来我们先看客户端是如何请求数据的

注意哦，我们的代码是写在a.com域名下面的

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<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&#63;callback=JSON_CALLBACK',
}).success(function (msg) {
console.log(data);
});
//或者
$http
.jsonp('http://www.b.com/test.php&#63;callback=JSON_CALLBACK')
.success(function (msg){
console.log(msg);
}); 
}]);
</script>
</head>
<body>
</body>
</html>

我们看到，这里是直接以jsonp的形式进行跨域请求的，其操作同jquery中对跨域的请求方式如出一辙。注意，我们的callback是固定的，即JSON_CALLBACK，尽量不要去做任何改动

我们再看服务端b.com中的test.php对请求数据的处理方式，这里以原生php的方式做参考

$callBack = isset($_GET['callback']) &#63; $_GET['callback'] : DEFAULT_CALLBACK;
exit($callBack.'('.json_encode($data).')');

我们再回来看看客户端console.log记录的结果

到此，也就是说我们跨域请求是成功的！

最后我们做个小总结，注意下其中的重点：

1.客户端跨域请求的url后追加的参数是?callback=JSON_CALLBACK，参数callback的值指定为JSON_CALLBACK，注意是大写，就是JSON_CALLBACK不要作任何改动，感觉这里是个不小的坑，?callback的值稍作改动，客户端就需要全局定义callback函数，而且还特么怎么再传给$scope处理？为了避免不必要的麻烦，这里建议就这么搞吧

2.再看服务端，服务端需要指定$callBack = $_GET['callback'];接收callback,而且你还会发现接收的callback不是我们客户端写的?callback的值，客户端指定JSON_CALLBACK应该是为了触发angularJs内部的机制

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

在JavaScript中替換字符串字符Mar 11, 2025 am 12:07 AM

JavaScript字符串替換方法詳解及常見問題解答本文將探討兩種在JavaScript中替換字符串字符的方法：在JavaScript代碼內部替換和在網頁HTML內部替換。在JavaScript代碼內部替換字符串最直接的方法是使用replace()方法： str = str.replace("find","replace"); 該方法僅替換第一個匹配項。要替換所有匹配項，需使用正則表達式並添加全局標誌g： str = str.replace(/fi

構建您自己的Ajax Web應用程序Mar 09, 2025 am 12:11 AM

因此，在這裡，您準備好了解所有稱為Ajax的東西。但是，到底是什麼？ AJAX一詞是指用於創建動態，交互式Web內容的一系列寬鬆的技術。 Ajax一詞，最初由Jesse J創造

如何創建和發布自己的JavaScript庫？Mar 18, 2025 pm 03:12 PM

文章討論了創建，發布和維護JavaScript庫，專注於計劃，開發，測試，文檔和促銷策略。

如何在瀏覽器中優化JavaScript代碼以進行性能？Mar 18, 2025 pm 03:14 PM

本文討論了在瀏覽器中優化JavaScript性能的策略，重點是減少執行時間並最大程度地減少對頁面負載速度的影響。

jQuery矩陣效果Mar 10, 2025 am 12:52 AM

將矩陣電影特效帶入你的網頁！這是一個基於著名電影《黑客帝國》的酷炫jQuery插件。該插件模擬了電影中經典的綠色字符特效，只需選擇一張圖片，插件就會將其轉換為充滿數字字符的矩陣風格畫面。快來試試吧，非常有趣！工作原理插件將圖片加載到畫布上，讀取像素和顏色值： data = ctx.getImageData(x, y, settings.grainSize, settings.grainSize).data 插件巧妙地讀取圖片的矩形區域，並利用jQuery計算每個區域的平均顏色。然後，使用

如何使用瀏覽器開發人員工具有效調試JavaScript代碼？Mar 18, 2025 pm 03:16 PM

本文討論了使用瀏覽器開發人員工具的有效JavaScript調試，專注於設置斷點，使用控制台和分析性能。

如何構建簡單的jQuery滑塊Mar 11, 2025 am 12:19 AM

本文將引導您使用jQuery庫創建一個簡單的圖片輪播。我們將使用bxSlider庫，它基於jQuery構建，並提供許多配置選項來設置輪播。如今，圖片輪播已成為網站必備功能——一圖胜千言！決定使用圖片輪播後，下一個問題是如何創建它。首先，您需要收集高質量、高分辨率的圖片。接下來，您需要使用HTML和一些JavaScript代碼來創建圖片輪播。網絡上有很多庫可以幫助您以不同的方式創建輪播。我們將使用開源的bxSlider庫。 bxSlider庫支持響應式設計，因此使用此庫構建的輪播可以適應任何