Access to fetch from origin has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present

This is driving me crazy. It doesn't give me this CORS error when there is no error on the backend. But when there is some kind of error (which I can't see because of cors) then it gives me this error. I am using Sanctum with JWT tokens for auth. That means I have set up my config/cors.php to allow access from all origins. But still when Laravel throws an error it gives me this CORS message.

Access to fetch at 'http://localhost:41166/user-settings/profile-picture' from origin 'http://localhost:47344' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Here is my config/cors.php

<?php

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

];

Here is the controller that throws an error (probably because of validation or something)

public function store()
{
    try {
        request()->validate(['file' => 'required|image|max:2000']);

        $filename = $this->uploadFile();
        $this->updateUserProfilePicture($filename);

        return response()->json(['filename' => $filename]);
    } catch (Exception $exception) {
        return response()->json(['error' => 'That didnt go thru']);
    }
}

Screenshot: https://i.ibb.co/52CMbsb/Screenshot-1.png

The problem seems to be that it doesn't even get to Laravel, but NGINX responds instead with it's own content and headers:

<html>

<head>
	<title>413 Request Entity Too Large</title>
</head>

<body>
	<center>
		<h1>413 Request Entity Too Large</h1>
	</center>
	<hr>
	<center>nginx/1.19.6</center>
</body>

</html>

martinszeltins

5 years ago

Best Answer

Level 14

I found the solution. It was to increase the client_max_body_size in nginx config.

In my /etc/nginx/conf.d/default.conf I put this then handled the rest with Laravel using the max validation rule.

server {
    listen 80 default_server;
    server_name _;

    ......

    client_max_body_size 100M;

    .......

    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }
}

Please or to participate in this conversation.