RTK查询-如何访问headers？

Question

我有一个有效的 RTK 查询 api，从后端读取成功登录后在有效负载中发送令牌。

后端 API 已更改，现在令牌出现在响应的 Authorization header 中，我不知道如何阅读它。

这是我以前在我的减速器上的东西。我在请求完成时使用匹配器并将令牌存储在有效负载中：

// reducer.js
const authReducer = createSlice({
  // ...
  extraReducers: (builder) => {
    builder.addMatcher(backendApi.endpoints.login.matchFulfilled, (state, { payload }) => {
      // save the payload.token in localstorage
    }
  }
});

似乎获取 headers 并不简单，实际上我在尝试从中获取 headers 时找不到 Authorization header要求：

// reducer.js
const authReducer = createSlice({
  // ...
  extraReducers: (builder) => {
    builder.addMatcher(backendApi.endpoints.login.matchFulfilled, (state, { meta }) => {
      const headers = meta.baseQueryMeta.response.headers; // this is a Headers {} object
      console.log(headers.get('content-type')); // prints application/json; charset=utf-8
      console.log(headers.get('authorization')); // prints undefined
    }
  }
});

当我尝试使用 console.log(Array.from(headers)) 调试和打印所有 header 时，我得到的是：

[
  [
    "cache-control",
    "max-age=0, private, must-revalidate"
  ],
  [
    "content-type",
    "application/json; charset=utf-8"
  ]
]

超级奇怪，因为响应还有很多 header，但我无法访问它们。

这里有什么指导吗？也许这样读 header 是不可能的？

提前致谢！

Answer 1

您正在那里做所有事情。如果 headers.get('authorization') 以 undefined 的形式返回，我认为这是一个 CORS 问题，导致您的 JavaScript 无法访问它。

因此您的服务器需要设置正确的 CORS headers，与客户端无关。

RTK查询-如何访问headers？

RTK Query - how to access headers?

redux-toolkit

rtk-query