CORS 策略错误与不记名令牌请求

Question

我正在使用不记名令牌构建一个反应应用程序 postAPI。

我已经将不记名令牌存储在 localStorage 中，并尝试接收以下代码的数据。

但是，它返回给我 CORS 策略错误。 我可以使用授权选项卡从 postman 接收数据。 但它不适用于 Header 选项卡以及授权承载令牌。

你能帮我解决这个问题吗？ 我通常从服务器打开cors策略，但这实际上是来自第三方api。

我试过 no-cors，但你不能用 no-cors 模式发送标头。

Access to fetch at 'https://d9u7x85vp9.execute-api.us-east-2.amazonaws.com/engine' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.


const postAIMove = async () => {

    const fetchOptions = {
        method: "POST",
        withCredentials: true,
        credentials: "include",
        headers: { 
            "Accept": "application/json",
            "Content-Type": "application/json",
            "Authorization": `Bearer ${localStorage.getItem("authToken")}`,
        },
        body: JSON.stringify({board})
    }



  const res = await fetch(`${API_URI}/engine`, fetchOptions)

Answer 1

CORS 是关于浏览器安全的。 postman 中的请求有效，因为 postman 忽略了无效Access-Control-Allow-Origin标头。

您需要将主机http://localhost:3000添加到该资源的允许主机列表中。 只有当您可以控制网络服务器的配置时，才能做到这一点。