Build a Pokémon Search App Project - Error Fetching Pokemo Data (Mixed Content Error) - SOLVED

Note - I found a solution (below) to this issue but I wanted to make a post in case anyone else encounters this and this can help/bring attention if I should try to open a github issue or something.

I’m getting a fetch error when trying to use the Pokemon URL for retrieving specific Pokemon data, when using the URL that is supplied by the first API endpoint (the all Pokemon list). I can retrieve the list of all Pokemon fine, but it fails when trying to fetch the specific Pokemon data. This only happens in the freeCodeCamp project page, if I load the page up from my local files it works fine. This also isn’t an issue if you ignore that URL from the JSON and hard code the base path: https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/{name-or-id}.

The error is:

Mixed Content: The page at ‘https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures-v8/build-a-pokemon-search-app-project/build-a-pokemon-search-app’ was loaded over HTTPS, but requested an insecure resource ‘http://pokeapi-proxy.freecodecamp.rocks/api/pokemon/5/’. This request has been blocked; the content must be served over HTTPS.

So basically my browser is refusing to call the URL that the API gave me because it is only HTTP and not HTTPS.

SOLUTION - I was able to get passed this by the string.replace method to replace “http” with “https” in the URL:

pokemonResponse = await fetch(pokemon.url.replace("http", "https"));

Edit- adding link to project:

Thx for the info, could you tell me where in the JS code did you place this?

It would be whereever you call fetch() to get data for the specific Pokemon. To clarify, this is only a problem if you use the URL that is in the JSON from the first API endpoint (the one for getting the list of all Pokemon).

1 Like

I opened an issue for it. You are not the first to face this, and the proxy really shouldn’t be replacing the protocol.

1 Like