$http JSONP 请求在 Chrome/Firefox 上导致 404，在 IE 中正常工作答案

【问题标题】：$http JSONP request results in 404 on Chrome/Firefox, works correctly in IE$http JSONP 请求在 Chrome/Firefox 上导致 404，在 IE 中正常工作
【发布时间】：2016-09-24 21:22:16
【问题描述】：

我正在使用 random word API 开发一个简单的 Hangman 应用程序。作者说它是 JSONP 兼容的。

看到这个小提琴：https://jsfiddle.net/1t8ur23p/7/

相关代码在这里。这在 IE 中正常工作，我每次都会得到一个随机词。但是我在 Firefox 和 Chrome 中得到了 404，我不知道为什么。

function getSecretWord() {
  //call the random word API using JSONP request
  $http.jsonp(
      'http://randomword.setgetgo.com/get.php?callback=JSON_CALLBACK'
  ).then(function(response) {
      console.log(response);
      //apply the random word to the local secret word
      $scope.word = response.data.Word;
      //setup the other parts of the game
      $scope.letters = response.data.Word.split("");
      $scope.answerArray = response.data.Word.replace(/./g, '-')
          .split("");
  }).catch(function(response) {

      //debugging... see the contents of the faulty response
      $scope.error = response;

      //there's been an error, just default the word to 'hello'
      $scope.word = 'hello';
      $scope.letters = $scope.word.split("");
      $scope.answerArray = $scope.word.replace(/./g, '-').split(
          "");
  });
}

【问题讨论】：

标签： javascript angularjs jsonp

【解决方案1】：

您是否在 HTTPS 页面上运行您的代码？因为这似乎是一个mixed content page 问题。我在 Chrome 和 Firefox 上看到以下错误：

Mixed Content: The page at 'https://fiddle.jshell.net/1t8ur23p/7/show/' was loaded over HTTPS, but requested an insecure script 'http://randomword.setgetgo.com/get.php?callback=angular.callbacks._0'. This request has been blocked; the content must be served over HTTPS.

当您尝试从 HTTPS 页面加载 HTTP 页面时会发生这种情况。可以看到，如果你从http://jsfiddle.net/1t8ur23p/7/（http，而不是https）运行代码，它工作正常。

【讨论】：

啊……就是这样。