无法在 createAsyncThunk 获取请求中使用 response.headers 访问响应 headers

Question

这是我在 playerSlice.js 中的获取请求：

export const fetchPlayer = createAsyncThunk(
  "players/fetchPlayer",
  async (payload) => {
    const options = {
      method: "GET",
      mode: "cors",
      credentials: "include",
      headers: {
        "Content-Type": "application/json",
        "Accept": "application/json",
        "AgentId": `${localStorage.agentId}` ? `${localStorage.agentId}` : null
      },
    };
    // console.log(options)
    const response = await fetch(
      `URL HERE`,
      options
    );

    if (response.ok) {
      console.log(response.headers)
      const player = await response.json();
      console.log(player)
      return { ...player };
    }
  }
);

console.log(player) 按预期工作，即我实际上得到了响应，但是当我检查 response.headers 它是空的 object 即使我已经允许并公开服务器上 headers???

node/express 端的 CORS 设置如下：

app.use(
  cors({
    "origin": "http://localhost:3001",
    "methods": ["GET", "PUT", "POST", "PATCH", "DELETE"],
    "allowedHeaders": ["Content-Type", "AgentId", "Accept"],
    "exposedHeaders": ["Content-Type", "AgentId", "Accept"],
    "credentials": true,
  })
);
app.use(express.json());
app.use('/', public)

我正在设置自定义 header 服务器端：

res.header('AgentId', agentId)
res.status(200).send({...REMOVED FOR BREVITY});

我是不是做错了什么？

P.S。这是我使用 redux/toolkit

的第一个项目

Answer 1

算了，我就是个白痴。这是控制台中的一个查看问题，据我所知，fetch 不是 return Headers 的普通对象，我必须像 response.headers.get('AgentId') 一样检索它们或迭代在他们之上。

无法在 createAsyncThunk 获取请求中使用 response.headers 访问响应 headers

Unable to access response headers with response.headers in a createAsyncThunk Fetch Request

node.js

reactjs

fetch-api

react-redux

redux-toolkit