在 AWS API 网关中使用 API-key 反应 Redux RTK 突变 CORS 错误

Question

我对 React 中的 Redux Tool Kit (RTK) 有疑问。我正在尝试使用 API 密钥向 API 网关 (REST API) 发送请求。 API 网关中的 CORS 如下所示：

'Access-Control-Allow-Headers': 'Content-Type,X-Api-Key',
'Access-Control-Allow-Origin': 'http://localhost:3000',
'Access-Control-Allow-Methods': 'OPTIONS,POST'

这就是 RTK api 的样子

const myApi = createApi({
    reducerPath: 'myApi',
    baseQuery: fetchBaseQuery({
        baseUrl: 'https://my-api.execute-api.eu-west-1.amazonaws.com/api',
        headers: {
            'Content-Type': 'application/json',
            'X-Api-Key': 'my-api-key-from-api-gateway',
        }
    }),
    endpoints: (builder) => ({
        postRequest: builder.mutation<Response, RequestBody>({
            query(body) {
                return {
                    url: '/helloworld',
                    method: 'POST',
                    body
                }
            }
        }),
    }),
})

当我尝试在 React 组件中使用 usePostRequestsMutation 挂钩时，我收到 403 的 CORS 错误。我检查了浏览器，预检查询不包含我在 createApi 块中指定的 headers。是否可以为预检查询添加 headers？通过执行以下操作可以重现 403 错误：

curl -v -X OPTIONS https://my-api.execute-api.eu-west-1.amazonaws.com/api/helloworld

上面提到的curl会return403 {"message":"Forbidden"}。当我将 header 和 X-Api-Key 添加到 OPTIONS 请求时，我得到 HTTP 200

curl -v -X OPTIONS -H "x-api-key: my-api-key-from-api-gateway" https://my-api.execute-api.eu-west-1.amazonaws.com/api/helloworld

总而言之 - 有什么方法可以将 x-api-key header 添加到 RTK 中的飞行前检查请求中吗？

Answer 1

尝试prepareHeaders完全按照文档建议https://redux-toolkit.js.org/rtk-query/api/fetchBaseQuery

Answer 2

对于任何对答案感兴趣的人 - 我找到了部分解决方案。在 AWS API 网关中，可以关闭 OPTIONS 方法的 API-key 并保留任何其他请求的 API-key 要求（本例中为 POST）。我仍然没有设法通过 OPTIONS http 方法从 RTK 发送 X-API-Key header。如前所述，使用 prepareHeaders 或 headers 设置 headers 仅适用于 POST/GET 方法。

在 AWS API 网关中使用 API-key 反应 Redux RTK 突变 CORS 错误

React Redux RTK mutation CORS error in AWS API Gateway with API-key

amazon-web-services

reactjs

react-redux

redux-toolkit

rtk-query