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

Question

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

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

但是，它向我返回 CORS 策略错误。我可以使用授权选项卡从邮递员那里接收数据。它不适用于 Header 选项卡以及授权持有者令牌。

你能帮我解决这个问题吗？我一般都是从服务端打开cors policy，但是这个居然是第三方的api.

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

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 是关于浏览器安全的。邮递员中的请求有效，因为邮递员忽略了无效的 Access-Control-Allow-Origin headers.

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

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

CORS policy Error with Bearer Token Request

javascript

reactjs

cors

bearer-token