Why browsers display CORS error in case of response 413?

Question

I was testing an REST Api that uploads image file to server.

The image was too large and exceeded max request body size, so Nginx refused it and returned response 413(Request Entity Too Large).

Nginx: error.log

*329 client intended to send too large body: 1432249 bytes, client: xx.xx.xx.xx, server: api.example.com, request: "POST /images HTTP/1.1", host: "api.example.com", referrer: "https://example.com/posts/create"

However, I found that firefox/chrome console said,

Chrome: console

Access to XMLHttpRequest at 'https://api.example.com/images' from origin 'https://example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Is there any connection between CORS and 413 error? Where does this message comes from and why?

Answer 1

The issue in this case is that the error response didn't have an appropriate Access-Control-Allow-Origin on it, so the requesting application didn't have permissions to view it. That is, even the error messages are subject to cross-origin policy.

Answer 2

This issue is not related to CORS. If you fix 413 error then CORS error will also get fixed on its own. You need to check why 413 error is coming. The size of image upload is more. You can use below code for fixing the same Add below code in Startup file -

.UseStartup<Startup>()
        .UseKestrel(options =>
        {
          options.Limits.MaxRequestBodySize = long.MaxValue;
        });

If still it is not fixed then you need to check the default image size in server repo. It’s usually by default 1mb. You can increase client_max_body_size. This will fix your problem.