Using jsonapi With react (Axios) gives me "CSRF token mismatch."

How to configure and adapt Aimeos based shops as developer
Forum rules
Always add your Aimeos and PHP version as well as your environment (Linux/Mac/Win)
Spam and unrelated posts will be removed immediately!
Kappa.yahyya
Posts: 11
Joined: 14 Jun 2021, 05:59

Using jsonapi With react (Axios) gives me "CSRF token mismatch."

Post by Kappa.yahyya » 14 Jun 2021, 06:18

Hi,

Our team is using Laravel/Aimeos for ecommerce solution.

When using Postman APIs, everything is working fine, but when it goes to React/Axios call, I receive 419 error code (CSRF token mismatch.) .my Aimeos is running online but React is on my localhost.

I tried the following:

1 - added "/jsonapi" to Laravel VerifyCsrfToken Exceptions but the user is not recognized and Aimeos generates a new token every time.

2 - removed the "/jsonapi" from Exceptions, tried to use "withCredentials" flag in Axios so it can receive/pass the cookies, but no change (cookies don't appear in axois calls)

3 - tried to set "allowed_origins" for my "localhost:3000" so the "withCredentials" flag can work, but it doesn’t make any difference.

i know aimeos using some cookies to recognize the basket/user but how should i pass them ?
What am I missing here? :roll: Can I use another solution rather than Axios?

User avatar
aimeos
Administrator
Posts: 7836
Joined: 01 Jan 1970, 00:00

Re: Using jsonapi With react (Axios) gives me "CSRF token mismatch."

Post by aimeos » 16 Jun 2021, 08:55

Axios is usally fine. Are you sure you pass back the Laravel session cookie and the CSRF token included in the response of the request you did before?

The CSRF token handling is described here:
https://aimeos.org/docs/latest/frontend ... i/baskets/
Professional support and custom implementation are available at Aimeos.com
If you like Aimeos, Image give us a star

Kappa.yahyya
Posts: 11
Joined: 14 Jun 2021, 05:59

Re: Using jsonapi With react (Axios) gives me "CSRF token mismatch."

Post by Kappa.yahyya » 18 Jun 2021, 10:25

Thank you.
I could handle with axios using "withCredentials" flag
https://stackoverflow.com/questions/430 ... omatically

But as you know, working with this flag needs http allow_origin not to be wildcarded (generates CORS error) , and it only works with SSL connection ( because of 2020 update of browser using "SameSite" flag ) , so we can not test it online.

iam wondering is there anyway to use Aimeos api's / Basket with JWT tokens , and not to use cookies?

Kappa.yahyya
Posts: 11
Joined: 14 Jun 2021, 05:59

Re: Using jsonapi With react (Axios) gives me "CSRF token mismatch."

Post by Kappa.yahyya » 05 Jul 2021, 14:06

For those who face same issue, i solve it by :

1- Use 127.0.0.1 instead of "localhost" for the front-end Part.

2-in laravel config/session.php edit path to this :
'path' => '/;SameSite=None; secure',

3- change 'same_site' flag to none in that file :
'same_site' => 'none',

Post Reply