API: CORS not accepted in firefox [SOLVED]

I’m working on a handy tournament viewer to compliment the Tournament through the years which is known for being inaccessible due to heavy browser load. And I noticed that the API rejects all requests from firefox due to a CORS error. I believe this is the reason why gotstats will not work in firefox either.

Note that I’m on a Linux machine (Ubuntu 20.04) with Firefox 77. This might not be the case from other OSes.

To reproduce fire this in your browser console (not here on the forums though):

fetch("https://online-go.com/api/v1/players?username=runarberg").then(d => d.json()).then(d => console.log(d))

Here on the forums and on the site we get the expected response, but on another site (e.g. http://localhost or https://avavt.github.io/gotstats) we get a CORS error (but only on Firefox).

CORS errors do not originate from the remote server, but rather a browser security policy (which is why the behavior is different between browsers.)

If you post the CORS error from your browser’s console logs, that’ll shed a bit of light on why Firefox is mad about it, but my guess is that it’s just more stringently adhering to a cross-origin security model. Typically GETs don’t require ACAO headers or anything like POSTs do, but there could be other origin headers that trip Firefox up.

I have my browser set to Icelandic so this is the error message I get:

Lokað á Cross-Origin beiðni: Reglan fyrir sama vefsvæði leyfir ekki að lesa gögn frá öðru vefsvæði á Player List – Django REST framework. (Ástæða: CORS beiðni mistókst).

It is a pretty generic CORS failure error message and it links to this page:

I suspect that the Access-Control-Allow-Origin: * is missing from the response headers:

$ curl -I https://online-go.com/api/v1/players/?username=runarberg
HTTP/2 200 
date: Sat, 04 Jul 2020 07:22:54 GMT
content-type: application/json
set-cookie: __cfduid=daea968f5fc7e556d60a68c42aa2c743f1593847374; expires=Mon, 03-Aug-20 07:22:54 GMT; path=/; domain=.online-go.com; HttpOnly; SameSite=Lax
vary: Accept-Encoding
vary: Accept, Accept-Language, Cookie, Origin
allow: GET, HEAD, OPTIONS
content-language: en
set-cookie: csrftoken=2ybrlYSLz3cP1YlSvHJ7SHgsW3QSLQPIdf0f3Koek1gi8USoublsVQQU3eqSt4UP; expires=Sat, 03 Jul 2021 07:22:54 GMT; Max-Age=31449600; Path=/; SameSite=Lax
cf-cache-status: DYNAMIC
cf-request-id: 03ba4dfb02000013c2159b8200000001
expect-ct: max-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct"
server: cloudflare
cf-ray: 5ad7190b3f6d13c2-SEA
alt-svc: h3-27=":443"; ma=86400, h3-28=":443"; ma=86400, h3-29=":443"; ma=86400

Which is needed according to the spec (see Stack overflow answer). In fact when I inspect the response in chrome I see they inject the missing header:

This is actually my own fault. Turns out that Privacy Badger was blocking the request :blush:

3 Likes