Erro de cors mesmo com as variaveis configuradas corretamente

Help
1

Logo após o deploy da api eu consigo ver os dados no meu front normalmente, mas após dar refresh ou entrar em qualquer outra coisa começa a dar erro de cors, sendo que eu estava acessando os dados a poucos segundos.

4

CORS is a browser feature that prevents browsers from fetching data from websites on other origins. There are three ways to prevent this error

  • Do your fetches serverside. If you are using Next.js, React Router, Tanstack Start, or any other Full Stack framework this is easy, but if you are building a static site then you don’t have this option. I can’t see your code since your repository is private but you’re using the Vite build preset so i assume it’s a static site
  • Fetch to the same origin. If your website is on example.com and your API is on example.com/api then you will not have any CORS issues fetching from the browser. If your api is on a different domain or even a subdomain like api.example.com then CORS will block it
  • Configure your API to accept your website’s origin. You can try these headers in your API responses to open it to all sites, and then if that works, narrow the Allow-Origin header to specifically your web app
return new Response(null, {
    status: 200,
    headers: {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
      'Access-Control-Allow-Headers': 'Content-Type, Authorization',
    },
  });

I suspect the reason for the inconsistency (where it appears to work on initial load and then breaks when you interact with it) is that the initial data is fetched at build time and pre-rendered into the page. Since CORS is only a browser feature, it’s not affected by this. Then when you interact, your app fetches again in the browser and that’s when the errors hit.

I’m making some assumptions here based on what I think your project looks like, so feel free to correct me if any of those were wrong