How to resolve CORS issue in v3?

Environment

Nuxt CLI v3.0.0-rc.6 00:21:35 RootDir: /Users/user/ryanown/ownwork/abroad-go/web 00:21:38 Nuxt project info: 00:21:38

---

• Operating System: Darwin
• Node Version: v16.14.2
• Nuxt Version: 3.0.0-rc.6
• Package Manager: npm@8.5.0
• Builder: vite
• User Config: build, alias, plugins, modules, css, vite
• Runtime Modules: @nuxtjs/tailwindcss@5.3.1
• Build Modules: -

Reproduction

Cannot mock a CORS issue here.

Describe the bug

I got a CORS error when I add a bearer token in my request header:

config.headers.Authorization = "Bearer token"

Then I got: Access to XMLHttpRequest at 'https://mysite/api/getUsers' from origin 'http://localhost:3000' has been blocked by CORS policy: Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response. I remember this isn’t gonna happen because we can set a proxy server to handle the CORS issue.

But can can’t make it work by setting the nuxt.config.ts lile:

vite: {
   server: {
        host: "localhost",
        port: 3000,
        proxy: {
          "/": {
            target: "https://mysite/api",
            changeOrigin: true,
          },
        },
        hmr: { overlay: false },
      },
}

The dev server port can even not be changed if I change 3000 to some other numbers like 1997.

haven’t it been supported yet?

Additional context

No response

Logs

No response

[HuakunShen]

@KahrLu The routes setting only works in development mode for me, but doesn’t work in production.

[qualiatokyoltd]

@HuakunShen

The routes setting only works in development mode for me, but doesn’t work in production.

Too me. may route “cors” options not work. use server middleware to solution.

at server/middleware/cors.ts

export default defineEventHandler((event) => {
  setResponseHeaders(event, {
    "Access-Control-Allow-Methods": "GET,HEAD,PUT,PATCH,POST,DELETE",
    "Access-Control-Allow-Origin": "*",
    'Access-Control-Allow-Credentials': 'true',
    "Access-Control-Allow-Headers": '*',
    "Access-Control-Expose-Headers": '*'
  })
  if(getMethod(event) === 'OPTIONS'){
    event.res.statusCode = 204
    event.res.statusMessage = "No Content."
    return 'OK'
  }
})