Pokeapi: Still missing CORS header

[dwicao]

Hi! I've used PokeAPI in my React.js pure client-side app [repo],
any API calls fail because it still missing CORS header,
although I've been set a user agent header { 'User-Agent': 'cheese' },
any workarounds?

SOLVED: cloudflare messes up the request.

1. Try add a slash to the end of the request - http://pokeapi.co/api/v2/

2. Try change API endpoints from http://pokeapi.co/api/v2 to http://pokeapi.salestock.net/api/v2
   It works! 🎉 🎉 🎉

3. Or as a temporary remedy, you can try cors.now.sh
   https://cors.now.sh/https://pokeapi.co/api/v2/

[Naramsim]

The app seems to work, on my side.

[dwicao]

I don't know why, but now it seems worked 🎉

[dwicao]

still don't work 😭

[antilama]

My app also stopped working few days ago due to similar error.

[Mjain10]

I have the same problem, can't seem to find a fix to it

[Naramsim]

Probably is something related to our CDN provider, CloudFlare.

Try to make direct HTTPS calls

_Also, try to remove any User Agent Header you have_

[antilama]

Calling API through HTTPS solved the issue for me, although I don't really understand how.

[Naramsim]

@antilama Probably our Cloudflare when redirecting http to https (somebody probably enabled HSTS) strips away our 'Access-Control-Allow-Origin' header.

If this solution work for @Mjain10 we can close

[Mjain10]

I'm getting a 504 error instead when using https

[arfianadam]

I still get this exact problem. Switched to https and still na da. Any fix?

[arfianadam]

Https request also requires Cloudflare verification which is not usable on client-side API calls.

[Naramsim]

So Cloudflare messes up the request. If anybody could investigate...

[dwicao]

Yeah, cloudflare messes up the request.
Change API endpoints from http://pokeapi.co/api/v2 to http://pokeapi.salestock.net/api/v2
It works! 🎉 🎉 🎉

[krinsane]

Even with http://pokeapi.salestock.net/api/v2, it works for sometime and later it stops working with the same CORS as the issue. What can be done?

[Naramsim]

As a temporary remedy, you can try cors.now.sh

https://cors.now.sh/https://pokeapi.co/api/v2/pokemon/1/

[davidnguyen179]

call via https is worked for me

[Koleja]

I have the same problem. I created simple app in June and it was working fine with simple $.getJSON request, and now I came back to this app and it just stopped working. Is there any permanent idea how to solve this? HTTPS works with Chrome but error is still on Safari, no clue how with Firefox.

[Naramsim]

@Koleja You could try digging on why Cloudflare sometimes strips away CORS headers

@phalt, is cloudflare configured properly?

[Bingbazaar]

Oddly enough, it worked for me to just request data with the added / at the end. So like:

https://pokeapi.co/api/v2/pokemon/722/
instead of
https://pokeapi.co/api/v2/pokemon/722

I don't know if it's gonna fix it for anybody else, but I thought I might as well post it here :)

[Naramsim]

@Bingbazaar when putting a slash at the end you are avoiding a 301 redirect. Because pokeapi.co/api/v2/pokemon/722 redirects to pokeapi.co/api/v2/pokemon/722/. That means you gain also in performance

[Ma7eer]

hmm Still no solution for this I see...

I tried everything mentioned on this post and nothing worked

[Neodecadente]

Having this issue on Firefox Quantum 61.0.1, NOT having this issue on Google Chrome 67.0.3 using https://pokeapi.co/api/v2/

Weird thing is that if I make the request from Firefox's console, it works, but not when requesting from my Javascript file.

[Jace-Beaudoin]

Was stuck on this for a while @Bingbazaar! Thanks! Sorry this hasn't been fixed for other people, hope it gets resolved soon.

[bclindner]

CORS seems to be strange overall - I can get this endpoint to work fine in Firefox and Chrome:
https://pokeapi.co/api/v2/pokemon/1/

But not this one, which should be equivalent to that:
https://pokeapi.co/api/v2/pokemon/bulbasaur/

Just adding some info to the pile.

[cmmartti]

@bclindner This is a side effect of the outage we had Thursday and Friday. We implemented a quick fix (uploading static JSON files to the server) in anticipation of moving the API to a static host at some point in the near future, but not everything works. Named endpoints only work for pokemon right now, for example. There are still a couple of hurdles to get over, but once we finally move to static hosting on Netlify, all of these issues should be solved.

See #369 for details of the outage, and #350 for the whole story.

[tdmalone]

@naramsim Do you want to check if the CORS header fix applies to the named resource symlinks as well?

[Naramsim]

I added the CORS to named res. https://pokeapi.co/api/v2/pokemon/golduck/

[SilasOtoko]

Any suggestions for those running a site with HTTPS that doesn't allow for HTTP calls? I tried using the salestock.net domain for the call and it worked great on my local environment, but my live site is using HTTPS and is blocking the request. There doesn't seem to be a working HTTPS version of pokeapi.salestock.net.

I started using the alternate domain when using the regular pokeapi.co was being blocked. For some reason, even though I am making the call directly to HTTPS://pokeapi.co/api/v2/pokemon/1, I keep getting a CORS error where it seems like its still calling directly to HTTP.

Example: https://vibrant-yonath-715bf2.netlify.com/

[cmmartti]

@SilasOtoko Try adding a trailing slash. For some reason, I was getting a CORS error without one. Currently, PokéAPI is hosted on a Digital Ocean server, but we will shortly move to completely static hosting on Firebase, which should fix this.

If adding a trailing slash doesn't work, try using https://pokeapi-215911.firebaseapp.com/api/v2/ instead. That's the temporary Firebase app URL for PokéAPI that we will be moving to at some point. I'm curious to know whether that solves your problem or not.

[SilasOtoko]

The Firebase URL worked perfectly, and it seems much faster too! Thanks! :)

[cmmartti]

Good to hear. Just be sure to switch back to pokeapi.co once the move to Firebase Hosting is complete.

[SilasOtoko]

Good to know. Thanks :)

[GeraldAburto]

Hi
I'm creating an angularjs client application that consumes this api
just for didactics purposes.

I getting the same error.

this is what i'm doing:

var getPokemons = function(){
   return $http({
     method: 'GET',
     url: 'https://pokeapi.co/api/v2/pokemon/'
   });
}

[Naramsim]

Do you get these headers in the response? If you try from your browser? Or maybe using curl or wget

access-control-allow-headers: Authorization, Origin, X-Requested-With, Content-Type, Accept
access-control-allow-methods: GET, OPTIONS
access-control-allow-origin: *

[GeraldAburto]

I get these headers only when i make the request from postman
i can't make it works in angularjs

[cmmartti]

@GeraldAburto I've never used Angular and don't know how the $http function works. Is there any way to set the mode to cors like in the fetch API?

[Naramsim]

You could also consider to use our browser wrapper. https://github.com/PokeAPI/pokeapi-js-wrapper

[GeraldAburto]

My purpose is to teach how to use angularjs to consume a web API

[Naramsim]

Always use HTTPS to avoid CORS issues.