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 !
Two problems require two different solution
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.
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.
Try hitting doing server to server requests and use your server as a middle man to get all the data.
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
According to this MDN:
To correct this problem on the client side, ensure that the credentials flag's value is false when issuing your CORS request.
Set your credential as false:
myApiRequest.defaults.withCredentials = false;
Note: XMLHttpRequest responses from a different domain cannot set cookie values for their own domain unless withCredentials is set to true before making the request, regardless of Access-Control- header values.
Use XMLHttpRequest requests separately in back-end as like this:
var oReq = new XMLHttpRequest();
oReq.addEventListener("progress", updateProgress);
oReq.addEventListener("load", transferComplete);
oReq.addEventListener("error", transferFailed);
oReq.addEventListener("abort", transferCanceled);
oReq.open();
The answer to your question:
My question is : is there any other way to do this without using this non supported method ?
is: as, you are using the requests sent from server side, so you have to use it from supported methods only, no other ways.
Reading Links: