Laravel CORS issue while using credentials: 'include'

[DamanMokha]

Hi, I am currently using Laravel 9 and was attempting to access the Basket API. As per the documentation, it is required to send cookies to retrieve cart data. I used the mode credentials: "include," but I am encountering a CORS error.

Code: Select all

Access to fetch at 'http://127.0.0.1:8000/jsonapi/basket?id=default' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.

I have allowed already it in cors.php of Laravel.

Code: Select all

<?php
return [
    'paths' => ['*'],
    'allowed_methods' => ['*'],
    'allowed_origins' => ['http://localhost:3000/'],
    'allowed_origins_patterns' => ['*'],
    'allowed_headers' => ['*'],
    'exposed_headers' => [],
    'max_age' => 0,
    'supports_credentials' => true,
];

Here is my fetch request code

Code: Select all

fetch(API_GET_CART + '?id=default', {
      method: 'GET',
      credentials: 'include',
      headers: {
        'Access-Control-Allow-Origin': 'http://localhost:3000',
        'Access-Control-Allow-Credentials': true,
        'Content-Type': 'application/json',
      },
    })
      .then((response) => response.json())
      .then((data) => {
        console.log(data);
      })
      .catch((error) => {
        console.log(error);
      });

Can you help me figure out what's wrong? I have tried various solutions to enable this, and I have already specified the allowed origin in the CORS settings, yet it is still taking it as *. Any assistance would be greatly appreciated.

Thanks

[aimeos]

Use the same domain for both, API and your app, either "localhost" or "127.0.0.1". The CORS problem occurs because they are different.

[DamanMokha]

Thanks for your reply. I have changed both to "localhost," but I am still having the same issue. Additionally, I plan to use a different front-end domain than the API endpoint.

Code: Select all

Access to fetch at 'http://localhost:8000/jsonapi/basket?id=default' from origin 'http://localhost:3000' has been blocked by CORS policy: 
Response to preflight request doesn't pass access control check: 
The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.

[aimeos]

Seems like the port must be the same too.

Using different domains for frontend and API causes a lot of problems as other projects have shown. For CORS, browsers create a pre-flight request for each API call which immediately doubles the number of requests your server has to cope with!

Thus, it's highly recommended to avoid CORS requests and use the same domain for frontend and API. If you are using e.g. a Kubernetes setup, you can still use different pods for frontend and API but the routing must map them to sub-directories of the same domain.