Problem with CORS for multipart/form-data requests

[tonymtz]

I'm using adonis v5. My API works great with REST requests. However, I'm exposing a route to upload files (videos in this case):

Controller:

  public async store({ auth, request }: HttpContextContract) {
    ...
    try {
      if (request.file('video')) {
        // something with request.file('video', { size: '100mb' })
        ...
        return videoSerializer(video)
      }
      ...
    } catch (error) {
      ...
    }
  }

The controller receives the file, and then it goes to a third party (Cloudinary in this scenario).
This logic works on localhost.

The CORS file:

import { CorsConfig } from '@ioc:Adonis/Core/Cors'

const corsConfig: CorsConfig = {
  enabled: true,
  origin: '*',
  methods: ['GET', 'HEAD', 'POST', 'PUT', 'PATCH', 'DELETE', 'OPTIONS'],
  headers: true,
  exposeHeaders: [
    'cache-control',
    'content-language',
    'content-type',
    'expires',
    'last-modified',
    'pragma',
  ],
  credentials: false,
  maxAge: 90,
}

export default corsConfig

The CORS config is pretty much the default. Once I deploy the API, when the client tries to upload files I get the CORS error:

Access to XMLHttpRequest at 'https://api.domain.tld/api/videos' from origin 'https://domain.tld' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
xhr.js:210          POST https://api.domain.tld/api/videos net::ERR_FAILED 413

No other request throws any CORS error, just the upload.

cURL of the failing request:

curl 'https://api.domain.tld/api/videos' \
  -H 'Connection: keep-alive' \
  -H 'Accept: application/json, text/plain, */*' \
  -H 'Authorization: Bearer token' \
  -H 'User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.109 Safari/537.36' \
  -H 'Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryEiYtECLp43A78xGb' \
  -H 'Sec-GPC: 1' \
  -H 'Origin: https://domain.tld' \
  -H 'Sec-Fetch-Site: same-site' \
  -H 'Sec-Fetch-Mode: cors' \
  -H 'Sec-Fetch-Dest: empty' \
  -H 'Referer: https://domain.tld/' \
  -H 'Accept-Language: en-US,en;q=0.9' \
  --data-raw $'------WebKitFormBoundaryEiYtECLp43A78xGb\r\nContent-Disposition: form-data; name="video"; filename="0siyqb.mp4"\r\nContent-Type: video/mp4\r\n\r\n\r\n------WebKitFormBoundaryEiYtECLp43A78xGb--\r\n' \
  --compressed

What am I doing wrong? 🤔

[iBankow]

I had this same problem, it worked perfectly on Localhost, but when I went to production it returned 413. Until I found out that nginx limited files to 500mb "client_max_body_size 500m" and changed it to "client_max_body_size 5120m" and it worked.

You can also look at the .config/bodyparser file.

[tonymtz]

It's funny because the error I received has nothing to do with this config... but it worked!
Thanks for the help, let me know if I can buy you a coffee :)