Advice on Fail To Fetch Error In Hosted Testing

Extensions
1

Hey all,

I am working on an extension that serves data from my EBS that I connect to through middleware server. To reach the middleware server, I use cloudflare tunnel to obscure my IP - I also stream, so I needed something zero-trust-level secure.

In local testing, my panel is working great and fetching data through the middleware server. Once I migrate to hosted, I now get a failed to fetch error.

When I send the fetch request from the panel, I send it with headers:

  headers: { 
    'Authorization': 'Bearer ' + token,
    'Content-Type': 'application/json',
    'Origin': ‘https://extension-files.twitch.tv‘
    'Access-Control-Request-Method': 'GET',
    'Access-Control-Request-Headers': 'Content-Type, Authorization'
  }

On the middleware server side, I respond with the following CORS headers for all requests:

res.header(‘Access-Control-Allow-Origin’, ‘*’);
res.header(‘Access-Control-Allow-Headers’, ‘Content-Type, Authorization’);
res.header(‘Access-Control-Allow-Methods’, ‘GET, POST, PUT, DELETE’);

In the capabilities tab of the developer extension page, I have included the DNS of my cloudflare tunnel that hits my middleware server in the “Allowlist panel Urls” and “Allowlist for URL Fetching Domains“ sections.

I have checked Cloudflare to see if any header re-writing is enabled and it is not. All headers should be passed as specified from the panel to the middleware server.

Yet still, I am getting a failed to fetch error.

This is by far my most ambitious CS endeavor to date and I am feeling a bit overwhelmed! The CORS stuff in particular has just been awful to overcome for local testing and apparently now hosted testing too.

Any advice would be greatly appreciated!

2

Panel URL’s not needed here for ref. iirc thats for “things the panel has a href/links to”

So you added https://somedomain.com/ to your Allowlist for URL Fetching Domains? And not something more narrow?

What does the console and network tools say in full?

Is there a reason to have your EBS home hosted?
Not all ISP’s will appreciate haveing home servers/services existing (might in fact be against your contract)

Generally you don’t need to include a origin header, and personally never set Access-Control headers, I let the browser handle those on it’s own. So you should generally only set the Authorization and Content-Type headers, the browser will do the rest here.

I suspect the problem is the origin, since that origin is for the Extension helper and not your code which is https://CLIENT_ID.ext-twitch.tv so you have overriden the origin with not the actual origin.

Will need the network and console in depth response. not just the failed to fetch itself.
Network should have the error we are looking for to debug fully.

And we need to check that OPTIONS as well as the GET is being correctly replied to.

Additionally https://securityheaders.com/ will let you test your EBS call (vai the tunnel) to see whats coming back

Edit: best advice

Keep Authorization and Content-Type remove the rest, the defaults/auto generated will suffice. And retest

3

Thanks so much for the info/advice! Prepping for a stream ATM, but next dev session, expect a thorough reply/response! I appreciate you!