Nuxt.js: How can I add CORS to nuxt?

[luiztsmelo]

I'm trying to get data from firebase and I'm getting this error:
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

_{This question is available on Nuxt.js community (#c1528)}

[0h]

Hi @luiztsmelo , I am dealing with this problem and just wanted to ask if you have found a solution for this problem. I would appreciate if you can help me, thanks

[reco]

@luiztsmelo same here, how did you configure CORS? +1

[0h]

@reco I have realized that my code was working on client side. I have configured it to work on server-side with cors headers and my problem has solved. Maybe it helps

[reco]

apologize i am new to vuejs and nuxt.
i understand in order to get this to work the nuxt local dev server needs to set the correct CORS.
how can i configure the nuxt server to allow CORS to an external domain like http://server.com/api?

thanks

[0h]

@reco no problem, i am new to vuejs too :) in my experience, nuxt is doing just the server rendering stuff so it doesnt working as a server. you need nuxt/express or nuxt/koa setup and do your api calls to external domain on server side. and then you can make internal api calls(local) without cors problem on vuejs/nuxt side(client side). this was my solution, hope this helps

[randyhoulahan]

could you share an example @halilbayrakci ?

[Extarys]

Had the same issue, I tried 3 different CORS packages for Koa, finally found one that works.
Complete index.js :

import Koa from 'koa'
import { Nuxt, Builder } from 'nuxt'
import cors from 'koa2-cors'
import * as compress from 'koa-compress'


const corsOptions = {
  origin: 'http://localhost:5000',
};

async function start () {
  const app = new Koa()
  const host = process.env.HOST || '127.0.0.1'
  const port = process.env.PORT || 3000

  // Import and Set Nuxt.js options
  let config = require('../nuxt.config.js')
  config.dev = !(app.env === 'production')

  // Instantiate nuxt.js
  const nuxt = new Nuxt(config)

  // Build in development
  if (config.dev) {
    console.log("NUXT is in dev mode")
    app.use(cors(corsOptions))

    const builder = new Builder(nuxt)
    await builder.build()
  }

  app.use(async (ctx, next) => {

    await next()
    ctx.status = 200 // koa defaults to 404 when it sees that status is unset
    return new Promise((resolve, reject) => {
      ctx.res.on('close', resolve)
      ctx.res.on('finish', resolve)
      console.log(ctx.request.method+" "+ctx.request.url+" = "+ctx.response.status);
      if(ctx.request.url === "/") console.log(ctx)
      nuxt.render(ctx.req, ctx.res, promise => {

        // nuxt.render passes a rejected promise into callback on error.
        promise.then(resolve).catch(reject)
      })
    })
  })

  app.use(compress({
    filter: function (content_type) {
      console.log("Content-Type: "+content_type)
      return /text/i.test(content_type)
    },
    threshold: 2048,
    flush: require('zlib').Z_SYNC_FLUSH
  }))

  app.listen(port, host)
  console.log('Server listening on ' + host + ':' + port) // eslint-disable-line no-console
}

start()

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.