3

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 !

FlowRan
  • 119
  • 1
  • 15
  • 1
    for reference (not an answer): [MDN "Credential is not supported if the CORS header ‘Access-Control-Allow-Origin’ is ‘*’"](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSNotSupportingCredentials) – kca Oct 15 '21 at 22:11
  • 1
    @kca that pretty much answers the question already though, IMHO. – CBroe Oct 18 '21 at 09:03
  • 1
    I've read this documentation of course. My question is : is there any other way to do this without using this non supported method ? – FlowRan Oct 18 '21 at 12:37
  • Why is this a non-supported method? – Dov Rine Oct 20 '21 at 07:47

2 Answers2

2

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.

ChandraKumar
  • 515
  • 4
  • 14
2

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

Mark Peter Fejes
  • 46
  • 6