AngularJS cross-domain 使用 $http 服务的请求

Question

我正在尝试通过使用 Twitch API (https://github.com/justintv/Twitch-API) 制作一个简单的网络应用程序来学习 AngularJS，但是我在执行 GET 请求时遇到了问题，因为它是cross-domain 请求。这是我试过的

angular.module('streamPlaylisterAppServices', []).factory('twitchService', ['$http',
  function($http) {
    return function(usercode){
      console.log("usercode inside service is: " + usercode)
      var authHeader = 'OAuth' + usercode;

      return $http({
        method: 'GET',
        url: ' https://api.twitch.tv/kraken',
        cache: false,
        headers:{
          'Accept': 'application/vnd.twitchtv.v3+json',
          'Authorization': 'OAuth ' + usercode
        }
      })
    };
  }]);

但我得到这个错误:

XMLHttpRequest cannot load https://api.twitch.tv/kraken. The request was redirected to 'http://www.twitch.tv/kraken', which is disallowed for cross-origin requests that require preflight.

我知道我需要使用 JSONP 请求，但我该如何设置 headers？任何人都可以给我一个 JSONP 请求的例子，以及如何像我在上面的例子中那样为它设置 headers 吗？如果我无法在 JSONP 请求中设置 headers，我还能如何设置请求 headers？

Answer 1

提出请求：

$http.jsonp('https://api.twitch.tv/kraken/games/top?limit=' + number + '&callback=JSON_CALLBACK')

这将 return 给你 json 并且你不会遇到 XMLHttpRequest 的问题

AngularJS cross-domain 使用 $http 服务的请求

AngularJS cross-domain requests using $http service

angularjs

rest

http-headers

jsonp

cross-domain-policy