How to add headers on Nuxt static files response?

Question

I have a json file on static folder and I'm trying to access it from another web site, but I'm having problem with the CORS.

How can I add headers (like Access-Control-Allow-Origin) on the static files response?

I tried this https://github.com/nuxt/nuxt.js/issues/2554#issuecomment-363795301, but didn't work for static files.

module.exports = function (req, res, next) {
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Access-Control-Allow-Headers', '*');
    res.setHeader('Access-Control-Allow-Methods', '*');
    next()
}

user_3720265 · Answer

Nuxt has a build in render property option, that you can use inside the nuxt.config.js file.

If you want to add Access-Control Headers for static files just use the setHeaders function.

See https://nuxtjs.org/api/configuration-render#static.

In the background Nuxt uses the serve-static package (also for other options).

Example:

render: {
   static: {
     setHeaders(res) {
       res.setHeader('X-Frame-Options', 'ALLOWALL')
       res.setHeader('Access-Control-Allow-Origin', '*')
       res.setHeader('Access-Control-Allow-Methods', 'GET')
       res.setHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept')
  }
}

user_7689052 · Answer

If you are using axios to make HTTP calls you might want to use Nuxt version of Axios. There you can easily use option proxy in combination with Proxy Module

How to add headers on Nuxt static files response?

2 Answers