即使我在服务器上设置了 CORS，为什么我的 JavaScript fetch API 调用仍会返回 CORS 错误？

Question

我正在开发一个 Web 应用程序，我需要从托管在不同域上的 API 获取数据。我在 JavaScript 代码中使用 fetch API，但不断收到 cors 错误。这是我的客户端代码：

app.js：

我收到的错误消息是： 从源“http://localhost:3000”获取“https://api.example.com/data”的访问已被 CORS 策略阻止：“Access-Control-Allow-Origin”标头不存在请求的资源。 在服务器端，我设置了 CORS 以允许来自我的开发服务器的请求：

server.js（带有 Express 的 Node.js）： 在此输入图片描述 尽管在服务器上设置了 CORS，但我仍然遇到该错误。我已验证服务器正在运行且可访问。是什么原因导致此问题？如何解决？

Answer 1

您的快递可能需要这样的中间件。

import { Request, Response, NextFunction } from 'express'

export function config(req: Request, res: Response, next: NextFunction): void {
    if (req.headers.origin) {
        res.header('Access-Control-Allow-Origin', req.headers.origin)
    } else {
        res.header('Access-Control-Allow-Origin', '*')
    }
}

您可以从以下位置获取额外信息：https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS