AngularJs服-jsonp解決跨域問題
阿新 • • 發佈：2019-02-14
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>AngularJS $http跨域</title> </head> <!-- 服務:服務是一個物件或函式，對外提供特定的功能. 內建服務: 1: $location是對原生Javascript中location物件屬性和方法的封裝。 2: $timeout&$interval對原生Javascript中的setTimeout和setInterval進行了封裝。 3: $filter在控制器中格式化資料。 4: $log列印除錯資訊 5: $http用於向服務端發起非同步請求。 6: 同時還支援多種快捷方式如$http.get()、$http.post()、$http.jsonp。 什麼是跨域: 協議，域名，埠有任何一個不同 就稱之為跨域 如何解決跨域: 1 後端寫代理介面，讓後端去抓資料 2 與對方合作，用jsonp方式傳送資料 --> <body ng-app="App"> <div ng-controller="DemoController"> </div> <script> function fn(arg) { console.log(arg); document.write('111'); } </script> <!-- <script src="./jsonp.php?callback=fn"></script> --> <script src="./libs/angular.min.js"></script> <script src="./libs/jquery.min.js"></script> <script> //注意:JSONP 跟Ajax 沒有本質關係 只不過是開發者用$.ajax方式使用jsonp // 1、js方式建立josnp // var script = createElement('script'); // script.src = url; // var head = document.querySelector('head'); // head.appendChild(script); // // 2、jQuery方式 // $.ajax({ // url: 'jsonp.php', // dataType: 'jsonp' // }); // 3、angulerjs方式 var App = angular.module('App', []); App.controller('DemoController', ['$http', '$scope', function ($http, $scope) { $http({ url: 'jsonp.php?a=JSON_CALLBACK', method: 'jsonp' // 採用JSONP方式 }).success(function (info) { console.log(info); }); }]); </script> </body> </html>