KKKKKKKK KKKKKKKK - 6 months ago 30
Javascript Question

$http JSONP request results in 404 on Chrome/Firefox, works correctly in IE

I'm developing a simple Hangman application using the random word API. The author says that it's JSONP compatible.

See this Fiddle: https://jsfiddle.net/1t8ur23p/7/

The relevant code is here. This is working correctly in IE and I'm getting a random word every time. But I'm getting a 404 in Firefox and Chrome and I can't tell why.

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(
"");
});
}

Answer

Are you running your code on a HTTPS page? Because this seems to be a mixed content page issue. I'm seeing the following error on Chrome and 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.

This happens when you try to load a HTTP page from a HTTPS page. You can see that if you run the code from http://jsfiddle.net/1t8ur23p/7/ (http, not https), it works fine.