Hey there, let’s work through this Nuxt 3 CORS issue together—this is a super common pitfall, so you’re not alone! CORS errors happen because browsers block frontend requests to external APIs that don’t explicitly allow your domain. Let’s break down the most effective fixes, including solving that confusing server-middleware problem you ran into.

1. Use Nuxt Proxy (Simplest & Most Recommended) #

The easiest way to bypass CORS is to let Nuxt’s server act as a proxy for your API requests. Since server-side requests aren’t subject to browser CORS rules, this eliminates the error entirely.

How to set it up: #

1. Install the proxy module first:

   npm install @nuxtjs-alt/proxy
   # or
   yarn add @nuxtjs-alt/proxy
   

2. Add it to your nuxt.config.ts and configure the proxy rules:

   export default defineNuxtConfig({
     modules: ['@nuxtjs-alt/proxy'],
     proxy: {
       '/api': {
         target: 'https://your-external-api-url.com', // Replace with your API's base URL
         changeOrigin: true, // Ensures the API sees the correct origin header
         pathRewrite: { '^/api': '' } // Optional: Removes the /api prefix from the forwarded request
       }
     }
   })
   

3. Update your requests to use the proxy path instead of the full API URL:

   // Using useFetch
   const { data } = await useFetch('/api/users')
   
   // Using Axios (if you have it set up)
   const { $axios } = useNuxtApp()
   const response = await $axios.get('/api/users')
   

Now your frontend talks to Nuxt’s server, which forwards the request to the external API—no more CORS errors!

2. Fix Your Server-Middleware Configuration #

It sounds like your server-middleware was returning JS files because of a path or setup mistake. Let’s clarify how server-middleware works in Nuxt 3 and fix it:

Option A: Global CORS Headers (For Development) #

If you just need to allow all origins during development, create a middleware file in server/middleware/cors.ts (the server/middleware folder is auto-scanned by Nuxt):

export default defineEventHandler((event) => {
  // Allow all origins (only use this in dev!)
  event.node.res.setHeader('Access-Control-Allow-Origin', '*')
  // Allow common HTTP methods
  event.node.res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
  // Allow common headers
  event.node.res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization')

  // Handle preflight OPTIONS requests
  if (event.node.req.method === 'OPTIONS') {
    event.node.res.statusCode = 200
    event.node.res.end()
    return
  }
})

This will add CORS headers to every request your Nuxt server receives.

Option B: Proxy Requests via Server-Middleware #

If you want to manually forward requests (instead of using the proxy module), create server/middleware/proxy.ts:

import { fetch } from 'ofetch'

export default defineEventHandler(async (event) => {
  // Only handle requests starting with /api/proxy
  if (event.path.startsWith('/api/proxy')) {
    // Build the target URL by replacing the proxy prefix
    const targetUrl = 'https://your-external-api-url.com' + event.path.replace('/api/proxy', '')
    
    // Forward the request to the external API
    const response = await fetch(targetUrl, {
      method: event.node.req.method,
      headers: event.node.req.headers,
      body: event.node.req.method !== 'GET' ? await readBody(event) : undefined
    })

    return response.json()
  }
})

Then you can request /api/proxy/users to hit the external API’s /users endpoint—no CORS issues here.

3. Ensure useFetch/Axios Requests Run Server-Side #

If you were still getting CORS errors with useFetch, you might have forced the request to run client-side. useFetch defaults to server-side (in SSR mode), which avoids CORS because the request comes from Nuxt’s server, not your browser.

Avoid adding server: false unless you absolutely need client-side requests:

// ❌ This runs client-side and will trigger CORS
const { data } = await useFetch('https://external-api.com/users', { server: false })

// ✅ This runs server-side (default) and skips CORS checks
const { data } = await useFetch('https://external-api.com/users')

If you must run the request client-side, stick with the proxy method above.

Quick Troubleshooting Tips #

• Double-check your proxy or server-middleware paths: Typos here can lead to unexpected responses (like returning JS files).
• For production, never use Access-Control-Allow-Origin: *—specify your actual domain(s) instead.
• If using Axios, make sure its baseURL points to your proxy path (e.g., /api) instead of the full external API URL.

内容的提问来源于stack exchange，提问作者youssef abdulaziz