AngularJS 跨域请求使用 $http 服务

Posted 2023-03-03

【中文标题】AngularJS 跨域请求使用 $http 服务

【英文标题】：AngularJS cross-domain requests using $http service

【发布时间】：2015-07-25 13:54:00

【问题描述】：

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

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 无法加载 https://api.twitch.tv/kraken。请求 被重定向到'http://www.twitch.tv/kraken'，这是不允许的 对于需要预检的跨域请求。

我知道我需要使用 JSONP 请求，但我该如何设置标头？谁能告诉我一个 JSONP 请求的示例以及如何像我在上面的示例中那样为其设置标头？如果 JSONP 请求中无法设置标头，那我该如何设置请求标头？

【参考方案1】：

提出请求：

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

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