#Cors issue with local development

1 messages · Page 1 of 1 (latest)

vagrant trench
#

We are in the process of moving to Remix, with it acting as our BFF as well.
Phase 1 is to build just SSR part, api routes will be moved in Phase 2.
Until Phase 2, our Remix node server will make calls to apis to our old BFF.
As part of this, while developing locally, I am running into Cors issue as the domain is different. In stage and prod, this will not be an issue as both pieces will be under the same domain
I have 2 ideas to bypass this locally and none of them are working currently

  1. Add handleDataRequest to entry.server.jsx and update request.headers' Access-Control-Allow-Origin to be * - did not work, Cors persists
  2. Add a resource route order/index.jsx and an action function (as it is a POST call), code as follows
// component
    const response = await fetch(orderUrl, {
        method: 'POST',
        body: JSON.stringify(schema)
    });

// order/index.jsx
export async function action({ request }) {
    switch (request.method) {
      case 'POST': {
        const schema = await request.json();
        const orderUrl = ORDER_URL; // from .env file
        const response = await fetch(orderUrl, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          mode: 'no-cors',
          body: schema
        });
      }
    }
}

Cors goes away but my response is {"data":{"size":0}}
Running same payload from postman works fine. Is there a way to make this easy and simple?

hollow vigil
#

there shouldn't be any CORS issue if you make your fetch only server-side, since CORS is a browser thing

#

so fetch your API from a loader/action in a route

#

and make sure your client-side code only fetch route loaders and actions

vagrant trench
#

I updated payload code and added json await to the response from my API inside remix-API. Cors issues have been fixed