How to force adonis send CORS Headers on static file requests

The Problem

I’m having trouble with Adonisjs on Firefox when requesting an image file, because adonis is not sending the Access-Control-Allow-Origin header when i’m requesting static files.

It just send this HTTP Header when i ask for non-static resources, like JSON data, etc.

Does anyone knows how can i solve this?

Can you share the contents of config/cors.json file?

Also it always nice to be descriptive with your questions and share some code snippets to build the context. Currently your question may lead to xy problem

Hello @virk, i’m so sorry for not posting my config/cors.js before.

Here’s my config/cors.js file:

'use strict'

module.exports = {
  origin: true, // have tried '*' also
  methods: ['GET', 'PUT', 'PATCH', 'POST', 'DELETE'],
  headers: true,
  exposeHeaders: false,
  credentials: false,
  maxAge: 90
}

here is the difference between response headers when i request dynamic and static resources.

GET /api/users

HTTP/1.1 200 OK
Access-Control-Allow-Origin: http://localhost:9527
X-Frame-Options: DENY
X-XSS-Protection: 1; mode=block
X-Content-Type-Options: nosniff
X-Download-Options: noopen
Content-Type: application/json; charset=utf-8
Content-Length: 450
Date: Mon, 08 Jul 2019 11:18:30 GMT
Connection: keep-alive

GET /uploads/N1fdNYFywvY4b5MKJyhA.jpeg

HTTP/1.1 200 OK
Accept-Ranges: bytes
Cache-Control: public, max-age=0
Last-Modified: Mon, 08 Jul 2019 07:49:08 GMT
ETag: W/"1103f-16bd08ece4d"
Content-Type: image/jpeg
Content-Length: 69695
Date: Mon, 08 Jul 2019 11:18:31 GMT
Connection: keep-alive

Ohh, so the CORS error is coming for N1fdNYFywvY4b5MKJyhA.jpeg file right, And the file is stored inside the public directory?

Yes, the file is inside public dir.

the file path is public/uploads/N1fdNYFywvY4b5MKJyhA.jpeg

Okay, the final thing I would need is the contents of start/kernel.js file. The CORS middleware must be applied before the static middleware.

1 Like

Right, here’s the code.

I’ll try to apply the changes you said.

'use strict'

const Server = use('Server')

const globalMiddleware = [
  'Adonis/Middleware/BodyParser',
  'Adonis/Middleware/Session',
  'Adonis/Middleware/Shield',
  'Adonis/Middleware/AuthInit',
  'App/Middleware/ConvertEmptyStringsToNull',
]

const namedMiddleware = {
  auth: 'Adonis/Middleware/Auth',
  guest: 'Adonis/Middleware/AllowGuestOnly',
}

const serverMiddleware = ['Adonis/Middleware/Static', 'Adonis/Middleware/Cors']

Server.registerGlobal(globalMiddleware)
  .registerNamed(namedMiddleware)
  .use(serverMiddleware)

Applying the CORS Middleware before the Static Middleware solved the problem. Ty @virk!

1 Like