Hi Brandon @brandonkelly,
I have a Nuxt.js app which is connected to a CraftCMS instance in a separated domain.

When I try to login from the Nuxt.js application using POST actions/users/login I'm getting back this error:
Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

Is there a way to handle the "preflight request"?

Best

@vettndr The \craft\filters\Cors handles OPTIONS preflight requests, as well as Cors-related headers.
Implement the filter in your config/app.web.php with something like this:

<?php

return [
    'as corsFilter' => [
        'class' => \craft\filters\Cors::class,
        'cors' => [
            'Origin' => [
                'https://my-nuxt-app.com',
            ],
            'Access-Control-Request-Method' => ['GET', 'POST', 'PUT', 'PATCH', 'DELETE', 'HEAD', 'OPTIONS'],
            'Access-Control-Request-Headers' => ['*'],
            'Access-Control-Allow-Credentials' => true,
            'Access-Control-Max-Age' => 86400,
            'Access-Control-Expose-Headers' => [],
        ],
    ],
];

@vettndr The \craft\filters\Cors handles OPTIONS preflight requests, as well as Cors-related headers. Implement the filter in your config/app.web.php with something like this:

<?php

return [
    'as corsFilter' => [
        'class' => \craft\filters\Cors::class,
        'cors' => [
            'Origin' => [
                'https://my-nuxt-app.com',
            ],
            'Access-Control-Request-Method' => ['GET', 'POST', 'PUT', 'PATCH', 'DELETE', 'HEAD', 'OPTIONS'],
            'Access-Control-Request-Headers' => ['*'],
            'Access-Control-Allow-Credentials' => true,
            'Access-Control-Max-Age' => 86400,
            'Access-Control-Expose-Headers' => [],
        ],
    ],
];

Hey @timkelty
thank you for your message!

I tried as you suggested me.... and now I'm facing a 400 Bad Request issue, this is the response:

"name": "Bad Request",
"message": "Unable to verify your data submission.",
"code": 0,
"status": 400,
"exception": "yii\\web\\BadRequestHttpException",
"file": "/var/www/html/vendor/yiisoft/yii2/web/Controller.php",
"line": 221,

I'm pretty sure the credentials I'm using are working in the backend when I try to access on it.

Thanks in advance for your support.

Best

@vettndr your request is failing CSRF validation.

You need to fetch a CSRF token first, then include it along with your request.
See https://craftcms.com/docs/5.x/development/forms.html#ajax for examples

@vettndr your request is failing CSRF validation.

You need to fetch a CSRF token first, then include it along with your request. See https://craftcms.com/docs/5.x/development/forms.html#ajax for examples

@timkelty yes, I’m fetching the CSRF token when the app is loaded for the first time and then I’m including it in the POST request.

I don’t know why it’s triggering that 400 exception.

How are you making the request (fetch, axios, etc)?
A common mistake is to not send credentials along with the request (eg withCredentials, credentials: include)

How are you making the request (fetch, axios, etc)? A common mistake is to not send credentials along with the request (eg withCredentials, credentials: include)

Hi @timkelty
this is the login request:

const { user } = await $fetch(
        `${envs.public.craftUrl}/${authRoutes.login}`,
        {
          method: "POST",
          headers: {
            Accept: "application/json",
            "X-CSRF-Token": csrfToken.value as string,
            "X-Requested-With": "XMLHttpRequest",
          },
          body: {
            loginName: email,
            password: password,
          },
          credentials: "include",
        }
      )

as you can see I'm setting the credentialsparameter

best

What are the domains involved? Are they subdomains of the same root?

I'm not seeing anything jump out from your example, so if you could, please email [email protected] with as much of the project as possible, specifically:

• composer.json/lock files
• config directory
• any custom modules or plugins
• a DB dump if possible

What are the domains involved? Are they subdomains of the same root?

I'm not seeing anything jump out from your example, so if you could, please email [email protected] with as much of the project as possible, specifically:

• composer.json/lock files
• config directory
• any custom modules or plugins
• a DB dump if possible

Hi @timkelty
thank you, I will send a request to the team soon.

Anyway I did a little debugging process and I found that in the validateCsrfToken($clientSuppliedToken = null) function
the $trueToken variable is printing different values comparing with $this->getCsrfTokenFromHeader().

It seems like it's comparing the token I passed in the header with another one.

I would really appreciate to read your thoughts about it.

Best

@vettndr @timkelty

Hi, any updates on this?
I'm also encountering the error "Unable to verify your data submission" when sending a request to the backend through a Vue app.

To investigate, I added some debug output and noticed that when validateCsrfToken() is called, Craft runs loadCsrfToken(), but it doesn't generate the same token as expected.

@vettndr @timkelty

Hi, any updates on this? I'm also encountering the error "Unable to verify your data submission" when sending a request to the backend through a Vue app.

To investigate, I added some debug output and noticed that when validateCsrfToken() is called, Craft runs loadCsrfToken(), but it doesn't generate the same token as expected.

Hi @vnali
this is happening also in my application just on safari and incognito mode.
I've already asked to the Craft team a little support on this but nothing has changed.

Best

cc @timkelty

Thanks for the nudge, @vettndr.
I found your support ticket – I'll dig in this week and follow up in this thread.

@timkelty @vettndr
The mistake on my part was that I didn't include credentials: 'include' when fetching the session info. I had only added it to the subsequent requests.
I tested it with some available browsers on Windows, including in incognito mode, and it worked.

If I’m right, it might be worth mentioning this in the documentation here. @AugustMiller

        const response = await fetch('/actions/users/session-info', {
            credentials: 'include',
            headers: {
              'Accept': 'application/json',
            }
        }); // Or your custom endpoint
        const sessioninfo = await response.json();

credentials: 'include',
headers: {
'Accept': 'application/json',
}

hey @vnali,
is your Vue app in a different domain comparing to the Craft instance?
I added the parameter credentials: 'include' ages ago...

@vettndr It's the same domain but a different subdomain. I can email you a link that you can check in your browser, if you'd like.

@vettndr It's the same domain but a different subdomain. I can email you a link that you can check in your browser, if you'd like.

thank you for your answer @vnali
In my case, I have a different domain, that's why I was asking to the Craft guys a possible solution.

I can check internally to move the frontend under the same domain/subdomain to solve it.

@vettndr
I'm not an expert on this, but since you're seeing this issue in a specific browser, it might be related to how the SameSite attribute behaves differently across browsers:
https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Set-Cookie#browser_compatibility

Also, here's how it's configured in Craft:
https://craftcms.com/docs/5.x/reference/config/general.html#samesitecookievalue

I'd also be interested to know if you've heard anything from the dev team about a possible solution.
Good luck with resolving this issue!