CORS error when multipart/form-data was added to request header

I'm using ReactJs in frontend and Laravel in backend and nginx as web server.
When I add multipart/form-data to axios post request I get the cors error:
It's considerablw that the project is dockerized.
The backend port is 8090 and frontend port is 8080.

const result = await axios(`${backendUrl}/shops`, {
  headers: {
      'Content-Type': `multipart/form-data; `,
      "Accept": "*/*",
      "Access-Control-Allow-Origin": "*"
  },
      method: "post",
      data: {
          values
      },
      withCredentials: true,
    });

I tried to disable cors policy in larevl core config file.
This is my Laravel cors config file:

'paths' => ['*'],
'allowed_methods' => ['*'],
'allowed_origins' => ['*'],
'allowed_origins_patterns' => [],
'allowed_headers' => ['*'],
'exposed_headers' => [],
'max_age' => 0,
'supports_credentials' => true,

I added client_max_body_size to nginx config file but the error didn't get resolved.

First of all, you should remove the Access-Control-Allow-Origin header from your axios request since it's a server-side response header.

Second, since you are using credentialed request your backend can't respond with Access-Control-Allow-Origin: *

> For requests without credentials, the literal value "*" can be specified as a wildcard; the value tells browsers to allow requesting code from any origin to access the resource. Attempting to use the wildcard with credentials results in an error.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin#directives

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSNotSupportingCredentials

Here is how you can verify your backend is properly configured to handle credentialed CORS requests (you'll need to replace http://localhost:3000 with your frontend origin, and http://localhost:3100/api/test with your backend API endpoint).

1. Verify access control headers are present in the OPTIONS response:

curl -v -X OPTIONS -H "Origin: http://localhost:3000" http://localhost:3100/api/test
*   Trying 127.0.0.1:3100...
* Connected to localhost (127.0.0.1) port 3100 (#0)
> OPTIONS /api/test HTTP/1.1
> Host: localhost:3100
> User-Agent: curl/7.88.1
> Accept: */*
> Origin: http://localhost:3000
> 
< HTTP/1.1 200 OK
< vary: RSC, Next-Router-State-Tree, Next-Router-Prefetch, Origin
< access-control-allow-credentials: true
< access-control-allow-methods: POST
< access-control-allow-origin: http://localhost:3000
< access-control-max-age: 300
< date: Fri, 07 Jul 2023 13:13:13 GMT
< connection: close
< transfer-encoding: chunked
< 
* Closing connection 0

• access-control-allow-credentials: true - this header must be present in the response
• access-control-allow-methods: POST - this header must be present and must include POST
• access-control-allow-origin: http://localhost:3000 - this header must be present and must include your frontend origin
• access-control-max-age: 300 - this header is optional; you can set the max-age to be reasonably short in dev environment
• vary: Origin - this header is recommended

2. Verify access control headers are present in the POST response:

curl -v -F param=value -H "Origin: http://localhost:3000" http://localhost:3100/api/test
*   Trying 127.0.0.1:3100...
* Connected to localhost (127.0.0.1) port 3100 (#0)
> POST /api/test HTTP/1.1
> Host: localhost:3100
> User-Agent: curl/7.88.1
> Accept: */*
> Origin: http://localhost:3000
> Content-Length: 145
> Content-Type: multipart/form-data; boundary=------------------------6a23bcb7ccaed2ec
> 
* We are completely uploaded and fine
< HTTP/1.1 200 OK
< vary: RSC, Next-Router-State-Tree, Next-Router-Prefetch, Origin, Accept-Encoding
< access-control-allow-credentials: true
< access-control-allow-methods: POST
< access-control-allow-origin: http://localhost:3000
< access-control-max-age: 300
< content-type: application/json
< date: Fri, 07 Jul 2023 13:19:47 GMT
< connection: close
< transfer-encoding: chunked
< 
* Closing connection 0

As a bare minimum, your POST response must include Access-Control-Allow-Origin and Access-Control-Allow-Credentials headers, but there is no harm in including the same access control headers as in the OPTIONS response.

Please let me know if this resolves your issue. Please also post the specific CORS error if the issue doesn't go away.

The issue has been solved by tiny changes in request.
I moved the method type from request body to request first line and append values to formData and sent it as the second argument of request and added boundary to request header:

const result = await axios.post(`${backendUrl}/shops`, formData, {
                    headers: {
                        'Content-Type': `multipart/form-data; boundary=${formData._boundary}`,
                    },
                    withCredentials: true,
                });