CODEWITHSUNDEEP
javascriptreactjsrestaxioscors
FlowRan
FlowRan

Reputation: 197

React : how to solve "Credential is not supported if the CORS header ‘Access-Control-Allow-Origin’ is ‘*’" error?

So I'm using a third party API in my front-end application. I was having some CORS issues. Since it's a public API, I contacted the API maintainers to ask them to lift the CORS control. They've done it, seemingly by putting a * to Access-Control-Allow-Origin.

It would be perfect but... since this (old) API require authentification, it's using cookies and now I get this error (see title).

My application being in React, I'm using Axios with a

myApiRequest.defaults.withCredentials = true;

line.

Is there any way to do it in a front-end application or is back-end the only way to do it ?

Thanks !

Upvotes: 3

Views: 2680

Answers (2)

Mark Peter Fejes
Mark Peter Fejes

Reputation: 46

Have you looked into the other headers that are used to control cross-origin requests?

You didn't specify the 3rd party API you are making the requests to, but can that be that the Access-Control-Allow-Origin is not enough?

I think the 3rd party API server needs to specify the following two headers at least as well:

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Credentials

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Methods

Can be related: https://stackoverflow.com/a/24689738/5747327 and https://stackoverflow.com/a/19744754/5747327

Upvotes: 2

ChandraKumar
ChandraKumar

Reputation: 547

Two problems require two different solution

Allowing the third party domain on your site

This is where you end up using CROS and ACAO. In a general sense, it controls which domain has access to this website be that loading a script or rending an image.

Cookie policy

You can control how your cookies are shared with third party domains or any JS code using cookie policy. Check about strict, lax.

But don't share the untrusted websites to access your cookies. As they request resources on behalf of a user.

Recommended approach

Try hitting doing server to server requests and use your server as a middle man to get all the data.

Upvotes: 2

Related Questions