[SOLVED] CORS issue calling Twitch API from localhost during development

[jeffmikels]

I’m developing a Twitch integration for my company that will run in an embedded browser on the user’s local machine. During development, I’m hosting the application with a local web host (vite, if anyone is interested).

However, during development, whenever I make a request to the twitch API, I get the following CORS error:

Access to fetch at 'https://api.twitch.tv/helix/users' from origin 'http://localhost:5174' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

I’m sending these headers with my request:

authorization: Bearer REMOVED
client-id: REMOVED
referer: http://localhost:5174/
x-restli-protocol-version: 2.0.0

I’m developing in Chrome v135.

I’ve seen previous issues on this forum and on Stack Overflow that were resolved by adding different headers, but I haven’t seen any issues related to the missing Access-Control-Allow-Origin header from the twitch servers.

What am I missing here?

[BarryCarlyon]

CORS is set on the destination server. So theres no headers you can set that would solve

Twitch doesn’t set CORS headers on the helix API (that would block you)

So suggests something else is in play causing an issue thats environmental

[jeffmikels]

The error in my original message was exactly what you said:

No 'Access-Control-Allow-Origin' header is present...

Chrome is complaining that helix doesn’t have an Access-Control-Allow-Origin header, and I’m wondering if other people are seeing the same error and what I can do to get around it.

[BarryCarlyon]

I cannot replicate your issue via this example: Twitch Implicit Auth Example

You are using the correct HTTP verb of GET?

Spot checking my example on localhost port 80 and github examples deploy it doesn’t make a prefetch call and the users call all is good.

[jeffmikels]

Your site is hosted on an HTTPS server. Mine is hosted HTTP on localhost. I’m trying to confirm how to get it working on my development environment too.

How are you avoiding the prefetch call?

[BarryCarlyon]

@jeffmikels

Your site is hosted on an HTTPS server. Mine is hosted HTTP on localhost.

I tested my github example

and I tested the same example on http://localhost:8000

@jeffmikels

How are you avoiding the prefetch call?

I didn’t, I just called fetch in JS

[jeffmikels]

Weird… on your site, AFTER the fetch operates successfully, I copy it and run it from the console and it fails.

[BarryCarlyon]

That fetch sets a bunch of extra/unneeded headers

if you copy the call that I do in JS

fetch("https://api.twitch.tv/helix/users", {
  "headers": {
    "authorization": "Bearer REMOVED",
    "client-id": "hozgh446gdilj5knsrsxxz8tahr3koz",
  },
});

That works.

So remover the referrer header in your code and let the browser do the determiner.

[jeffmikels]

Thanks. That fixed it.

[jeffmikels]

RETRACTED… SEE BELOW

For anyone finding this in the future. The API documentation says to make sure you are using the following header:

X-Restli-Protocol-Version: 2.0.0

However, when making calls from a browser context, you should only use the authorization and the client-id headers. I made them lowercase as well.

[BarryCarlyon]

@jeffmikels

The API documentation says to make sure you are using the following header

Whose API documentation? Thats not a required Twich API header.

[jeffmikels]

D’oh! Double-checked and that header was in some leftover code from a LinkedIn implementation.

LinkedIn is a Microsoft product and has all kinds of wonky extra http cruft.

Thanks for keeping the Twitch API nice and clean, Twitch devs.

My bad. Thanks for the help.