CORS Requests + Responses

[gxxcastillo]

When running my integration tests, which use MSW for mocking api requests, I'm noticing "OPTIONS" pre-flight requests are being made.

What's the recommended approach for dealing with these CORS requests?

I've gone about adding the following handler:

  http.all('*', ({ request }) => {
    if (request.method === 'OPTIONS') {
      return new Response(null, {
        status: 204,
        headers: {
          'Access-Control-Allow-Origin': '*',
          'Access-Control-Allow-Methods': 'GET,PUT,POST,DELETE',
          'Access-Control-Allow-Headers': '*',
        },
      });
    }
  ...

However, I'm still getting Network Errors. Is there something I need to do for the MSW server to handle CORS requests?

[kettanaito]

Hi, @gxxcastillo.

What you are doing looks correct to me. You can use http.options() handler to add the CORS response to all requests or a subset of requests.

http.options('*', () => {
  return new Response(null, {
    status: 200,
    headers: {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods': 'GET,PUT,POST,DELETE',
      'Access-Control-Allow-Headers': '*',
    },
  })
})

However, I'm still getting Network Errors.

Can you please share those errors? Where are they coming from? What do they state?

[gxxcastillo]

Hi, just following up on this thread. I haven't seen the CORS errors in a while now and I haven't had to use the http.options() handler. The errors seem to have gone away on their own.

[kettanaito]

CORS is usually triggered by your request client (or the browser). Perhaps something changed, and that resulted in the issue auto-fixing itself.

If anyone encounters CORS errors, observe the traffic you have, and make sure to provide the respective request handlers for CORS requests.