CORS Error

[wicked ginkgo]

I am getting an error that is preventing me from getting a cookie for auth with Directus.

Access to fetch at 'https://mydomain.com/auth/login' from origin 'http://localhost:3000' has been blocked by CORS policy: Request header field credentials is not allowed by Access-Control-Allow-Headers in preflight response.

I have the following for my fetch:

 const handleSubmit = async () => {
    const url = 'https://mydirectusdomain.com/auth/login'
    const request = await fetch(url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        credentials: 'include',
      },
      body: JSON.stringify({
        email: email,
        password: password,
        mode: 'cookie',
      }),
    })
    const response = await request.json()
    console.log(response)
  }

I have the following .env vars in Directus

CORS_CREDENTIALS=true
CORS_ENABLED=true
CORS_ORIGIN=true

[solar stump]

I believe you have a bug in your JS. credentials: 'include' isn't a Header, so it should be one level "up"

const handleSubmit = async () => {
    const url = 'https://mydirectusdomain.com/auth/login'
    const request = await fetch(url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      credentials: 'include',
      body: JSON.stringify({
        email: email,
        password: password,
        mode: 'cookie',
      }),
    })
    const response = await request.json()
    console.log(response)
  }

[wicked ginkgo]

You are right! Thank you!

[wicked ginkgo]

Interesting, I get a refresh token now but when I attempt to fetch data that is not public it just deletes the cookie.

[solar stump]

I'm assuming there's a mismatch in your refresh cookie configuration in environment variables, and the domain. Could also be a localhost vs https:// live project difference

Browsers have gotten fairly strict/finicky when it comes to "third party" cookies

[wicked ginkgo]

I'll keep digging, thank you

I think I understand my issue. I am using server side rendering with Node so I need to attach the cookie to the request header I believe.

[solar stump]

Ah yeah that makes sense. Otherwise every request from the client is going to be unauthenticated again.

[wicked ginkgo]

Is there any documentation on doing this? Or is it something pretty straight forward and common?

[solar stump]

This is very framework specific, and not really anything directus does in any particular way

[wicked ginkgo]

Thank you, I really appreciate your feedback. It is very helpful.

[solar stump]

Np! Thank American Airlines for delaying my flight a couple hours 😛 Gives me some quality answer-questions time

[wicked ginkgo]

I am using Astro which has a Node adapter for SSR and their documentation shows that I can set a cookie on the request header with:

---
Astro.response.headers.set('Set-Cookie', 'a=b; Path=/;');
---

The only problem is I don't know if I should add the cookie somehow within fetch or somewhere else.

[solar stump]

The only problem is I don't know if I should add the cookie somehow within fetch or somewhere else.

No idea.. that's an astro specific thing that i'm not aware of

[turbid harness]

I think I am getting a similar error. I'm building a custom component that makes an api call to an outside service.

import {ref} from "vue";

const data = ref()
axios.post("https://api.mjml.io/v1/render", {"mjml": `<mjml><mj-body><mj-container><mj-section><mj-column><mj-text>Hello World</mj-text></mj-column></mj-section></mj-container></mj-body></mjml>`}, {auth:{username: "sampleuser", password:"samplepass"}}).then((res) => {
  data.value = res.data.mjml
})

My .env contains the following:

CORS_ORIGIN=true
CORS_CREDENTIALS=true```

However, the response body is not available to scripts due to `Reason: CORS Missing Allow Origin`

Do y'all have any ideas on how to fix this? Thank you for your help!

Some more information, I can see the response comes back 200 in the network inspector, it's just blocked from being used further.

[solar stump]

I don't know if you can fix that! In this case, it sounds like the external service doesn't return the CORS headers, which means that it's out of your control 🤔

[turbid harness]

Ah, that would definitely do it. Not sure why I didn't think of it from that angle. Thanks for getting back to me so quickly

[turbid harness]

@solar stump I just thought about it some more. I do think this is on the directus side. The request does return the correct data, but it just appears that directus is blocking my custom module from utilizing the data. Could it still just be what you suggested? I'm also able to make the request via python requests and it returns the correct data as well, allowing me to access it as needed.

[solar stump]

CORS errors are from the browser, not from Directus.. In this case, if you're requesting that URL directly from the front-end as per your example, that CORS error is the browser preventing you from using that request because of missing headers from the origin (which would be the third party api in this case)

You can verify this by doing the same request from JS outside of Directus, you'll get the same error

For example, copy paste:

await fetch("https://api.mjml.io/v1/render", {
    method: 'POST',
    body: JSON.stringify({"mjml": `<mjml><mj-body><mj-container><mj-section><mj-column><mj-text>Hello World</mj-text></mj-column></mj-section></mj-container></mj-body></mjml>`}),
    headers: {
        Authorization: 'Basic ' + btoa('sampleuser:samplepass')
    }
});

into the console and you'll see the same problem 🙂