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
- Add
handleDataRequesttoentry.server.jsxand update request.headers' Access-Control-Allow-Origin to be*- did not work, Cors persists - Add a resource route
order/index.jsxand 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?