CORS Policy Blocking Fetch Requests from Twitch Extension to Vercel API

Extensions
1

Hello Twitch Developer Support,

I’m currently developing a Twitch Extension that uses a backend hosted on Vercel. The extension frontend is served from https://anilistprofile.vercel.app, and the backend API endpoints are located at https://anilist-extension.vercel.app/api.

While testing the extension in Hosted Test mode, I’m encountering a persistent CORS error when trying to send a fetch() request from the extension to my backend:

Access to fetch at ‘https://anilist-extension.vercel.app/api/save-username’ from origin ‘https://anilistprofile.vercel.app’ 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.

I’ve already configured my backend to handle CORS properly by explicitly setting the following headers in the response:

Access-Control-Allow-Origin: https://anilistprofile.vercel.app
Access-Control-Allow-Methods: POST, OPTIONS
Access-Control-Allow-Headers: Content-Type, Authorization

I also handle OPTIONS preflight requests correctly and return a 200 status.

Despite this, Twitch Hosted Test continues to block the request, and the browser reports a failed fetch due to missing CORS headers. I’ve verified that the headers are present when testing the endpoint directly via curl and Postman.

Could this be related to how Twitch Hosted Test enforces Content Security Policy or origin validation? Is there a specific configuration or domain requirement I need to meet for Twitch to allow communication between these two Vercel-hosted domains?

Any guidance or clarification would be greatly appreciated.

Let me know if you’d like to include screenshots, logs, or a link to your extension manifest for context. I can help you format those too :grinning_face_with_smiling_eyes:

My repository on github: GitHub - mici1708/anilistprofile

2

Did you set the relevant fields in the CSP in the Extensions Developer Dashboard?

Security headers doesn’t show any CSP headers - https://securityheaders.com/?q=https%3A%2F%2Fanilist-extension.vercel.app%2Fapi%2Fsave-username&hide=on&followRedirects=on

And CURL -X POST-ing

image
image570×156 6.61 KB

Shows DEPLOYMENT_NOT_FOUND

And a 404 not found will manifest as a CORS header as generally 404 pages don’t have much in the way of headers :stuck_out_tongue:

3

I have fixed, thanks for your help

4

Now I’m building a Twitch Extension that uses the Config API to store the broadcaster’s AniList username via window.Twitch.ext.configuration.set().

Everything works as expected in the config view (settings.html):

  • I’m successfully saving to both "broadcaster" and "global" segments using version "2.0"
  • Logs confirm the payload is valid and the save call doesn’t throw any errors

However, in the panel.html view, I’m not receiving the configuration at all:

  • window.Twitch.ext.configuration.broadcaster is always undefined
  • window.Twitch.ext.configuration.global is also undefined
  • This happens both during onAuthorized and inside configuration.onChanged
  • Even with full fallbacks and delays via setTimeout, nothing is returned

I’ve tested:

  • Multiple versions ("1.0", "2.0", "3.0")
  • Full reloads of Hosted Test (not just refresh)
  • Saving via broadcaster + global segments
  • Logging full SDK state from both views

I’m testing via Hosted Test, but I’m unsure if my panel view is properly linked to the broadcaster identity. Could Twitch be treating it as a viewer and hiding the config?

Any suggestions, known bugs, or workarounds to force propagation of config data into the panel view would be massively appreciated.

New version: Releases · mici1708/anilistprofile · GitHub

5

Did you actually turn the config service on in the developer console.

6

image
image1660×807 75.8 KB

7

This is a screenshot of the homepage of the dev console of a version of an extension

The config service toggle is on the Capabilties tab

image
image1484×799 71.9 KB

8

thank you infinitely, now working