infinitered / apisauce

Axios + standardized errors + request/response transforms.
MIT License
2.78k stars 184 forks source link

CORS errors #293

Closed stesvis closed 2 years ago

stesvis commented 2 years ago

Hello, first of all I would like to ask if this package can be used only in React Native or also in React.

I am using it in React and I am trying to switch from Axios to ApiSauce.

However, my requests always fail due to a CORS issue, while they were working with Axios. My backend already allows CORS [*]

I was curious if it's an issue or if there is a way to make it work in React. A sample error is:

Access to XMLHttpRequest at 'http://127.0.0.1:8000/api/v1.0/auth/login' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

Burane commented 2 years ago

You cant use the wildcard (*) in your api when you set credentials to true or include.

You have to set the origins in the configuration of your cors in your api, if you still want to allow cors from anywhere you can use something like that :

{
    credentials: true,
    /* allow cors from anywhere */
    origin: /.*/gm,
  }
stesvis commented 2 years ago

You cant use the wildcard (*) in your api when you set credentials to true or include.

You have to set the origins in the configuration of your cors in your api, if you still want to allow cors from anywhere you can use something like that :

{
    credentials: true,
    /* allow cors from anywhere */
    origin: /.*/gm,
  }

Thanks for the clarification!