Search code examples
jquerygetjson

How do I fix a mixed content error when using getJSON on a HTTP URL (JSFiddle)?

I am trying to use getJSON within JSFiddle, but as JSFiddle uses HTTPS and the URL I'm using as a parameter uses HTTP, there is a mixed content error:

code:

$.getJSON('http://swapi.co/api/people/2/?format=json', function(C3P0) {
  alert(C3P0.mass)
})

error:

jquery-3.1.0.js:9392 Mixed Content: The page at 'https://jsfiddle.net/Rubyleaf_MBarton/g802f6yL/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://swapi.co/api/people/2/?format=json'. This request has been blocked; the content must be served over HTTPS.

jquery-3.1.0.js:9392 XMLHttpRequest cannot load http://swapi.co/api/people/2/?format=json. Failed to start loading.

Am I able to fix this error?

Solution

  • swapi.co also supports https. Best would be to make requests to the secure version of the API:

    $.getJSON('https://swapi.co/api/people/2/?format=json', function(C3P0) {
  alert(C3P0.mass)
})

    This way your code will work on both http and https protocols.