Nuxt 3 App > Express API 服务器 CORS 错误（在同一主机上）

Question

我有一个简单的 SSR Nuxt 3 应用程序，我试图与在同一台机器上运行的 Express 应用程序通信，但我收到一个 CORS 错误，我不知道如何解决：

Access to fetch at 'http://localhost:8081/api/test' from origin 'http://147.182.204.161:8080' has been blocked by CORS policy: The request client is not a secure context and the resource is in more-private address space `local`.

Nuxt 应用程序在端口 8080 上运行，Express 应用程序在端口 8081 上运行

Nuxt 应用程序向 Express 应用程序发出一个简单的 GET 请求，如下所示：

const response = await $fetch('http://localhost:8081/api/test')
console.log('response:', response);

这在本地运行时工作正常，但一旦我将它放在 VPS 上，我就会收到 CORS 错误。 Nuxt 应用程序通过“内置”节点服务器或 Nuxt 3 附带的任何默认服务器运行：

PORT=8080 node .output/server/index.mjs

我的理解是这是the recommended way to run a Nuxt3 app in production.

如果我使用完全限定的域名，我也会收到错误消息，例如http://example.com

Access to fetch at 'http://localhost:8081/api/test' from origin 'http://example.com:8080' has been blocked by CORS policy: The request client is not a secure context and the resource is in more-private address space `local`.

我也收到这个错误无论 Express 应用程序是否正在运行所以这不可能是 Express 应用程序的 CORS 问题（我尝试在 Express 应用程序上完全打开 CORS，但没有任何区别）所以我怀疑问题与浏览器有关？

Answer 1

添加server/middleware/cors.ts

内容：

import { defineEventHandler, setResponseHeaders } from 'h3'

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": '*'
  })
})

检查标题，例如：

http -h GET http://localhost:3000/

默认情况下给出：

HTTP/1.1 200 OK
Access-Control-Allow-Origin: *
connection: close
content-length: 20459
content-type: text/html;charset=UTF-8
date: Sat, 19 Nov 2022 09:44:28 GMT
server-timing: -;dur=0;desc="Generate"
x-powered-by: Nuxt

但是有了这个中间件你会看到

HTTP/1.1 200 OK
access-control-allow-credentials: true
access-control-allow-headers: *
access-control-allow-methods: GET,HEAD,PUT,PATCH,POST,DELETE
access-control-allow-origin: *
access-control-expose-headers: *
connection: close
content-length: 20459
content-type: text/html;charset=UTF-8
date: Sat, 19 Nov 2022 09:45:00 GMT
server-timing: -;dur=0;desc="Generate"
x-powered-by: Nuxt

相关问题：

https://github.com/nuxt/framework/issues/6650

但是您不需要在此中间件中返回任何内容，因为 nuxt 会正确地为您处理选项请求。