N
Nuxt•this hour
grouse

Nuxt cors error when api is request from another host

the api works within the nuxt application below is my nuxt.config.ts 
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: "2024-11-01",
  devtools: { enabled: true },
  modules: [
    "@nuxt/fonts",
    "@nuxt/icon",
    "@nuxt/image",
    "nitro-cloudflare-dev",
    //
  ],
  devServer: {
    cors: {
      allowHeaders: ['*'],
      origin: ['*'],
      methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
    },
  },
  routeRules: {
    '/api/**': {
      cors: true,
      headers: {
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
        'Access-Control-Allow-Headers': '*',
      },
    }
  }
})
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: "2024-11-01",
  devtools: { enabled: true },
  modules: [
    "@nuxt/fonts",
    "@nuxt/icon",
    "@nuxt/image",
    "nitro-cloudflare-dev",
    //
  ],
  devServer: {
    cors: {
      allowHeaders: ['*'],
      origin: ['*'],
      methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
    },
  },
  routeRules: {
    '/api/**': {
      cors: true,
      headers: {
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
        'Access-Control-Allow-Headers': '*',
      },
    }
  }
})
ps: it doesnt work even when i uninstalled the nitro-cloudflare-dev modules
No description
No description
2 Replies
kapa.ai
kapa.ai•23h ago
Hi @grouse. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Your configuration for enabling CORS on API routes in Nuxt is mostly correct, but there are a few important points and limitations to be aware of: 1. devServer.cors is for Development Only
The devServer.cors option only affects the Nuxt development server. It does not apply to production builds or serverless/edge deployments. If your API is being accessed from another host in production, you must ensure CORS headers are set at the server/API level, not just in the dev server config Nuxt devServer docs. 2. routeRules and CORS
Setting cors: true in routeRules for /api/** is the correct way to enable CORS headers for those routes in Nuxt 3/Nitro. You can also customize headers as you have done. However, the documentation notes that CORS headers are automatically added with cors: true, and you can override them with headers Hybrid Rendering & Route Rules. 3. CORS Issues May Be External
If your API works within the Nuxt app but not when accessed from another host, the issue may be: - The API is not actually returning the correct CORS headers in production. - The deployment platform (e.g., Cloudflare, Vercel, Netlify) may override or block custom headers. - There may be a misconfiguration in the way the API is exposed or proxied. 4. Cloudflare and Edge Deployments
If you are deploying to Cloudflare or another edge platform, be aware that some platforms may strip or override CORS headers unless explicitly configured. The knowledge sources do not provide detailed steps for Cloudflare-specific CORS handling. 5. Testing CORS
Make sure you are testing CORS from a different origin (domain/port/protocol) and not from the same host, as browsers enforce CORS only for cross-origin requests. Summary:
Your Nuxt config is correct for enabling CORS on /api/** routes using routeRules. If it still doesn't work, the problem is likely with your deployment environment or how the API is exposed, not with your Nuxt config. The knowledge sources do not provide further troubleshooting steps for Cloudflare or other edge-specific CORS issues. If you need to support CORS in production, ensure your deployment platform allows custom headers and does not strip them. If you are still having issues, you may need to consult your hosting provider's documentation or support. References:
- Nuxt devServer CORS - Hybrid Rendering & Route Rules ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•23h ago
<@482138064202760192> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?