Error de CORS en React Redux RTK mutation en AWS API Gateway con API-key.

05 Aug, 2023 Programación 0

Tengo un problema con Redux Tool Kit (RTK) en React. Estoy tratando de enviar una solicitud a API Gateway (API REST) con una clave de API. La configuración CORS en API Gateway se ve así:

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

Así es como se ve la API de RTK:

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
                }
            }
        }),
    }),
})

Cuando intento usar el gancho usePostRequestsMutation en un componente de React, obtengo errores de CORS con el código 403. Verifiqué en el navegador y la consulta de verificación previa NO contiene las cabeceras que especifiqué en el bloque createApi. ¿Existe alguna posibilidad de agregar cabeceras para la consulta de verificación previa?

Es posible reproducir el error 403 haciendo lo siguiente:

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

El comando curl mencionado anteriormente devolverá 403 {"message":"Forbidden"}. Cuando agrego el encabezado requerido con X-Api-Key a la solicitud OPTIONS, entonces obtengo 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

En resumen, ¿existe alguna forma de agregar el encabezado x-api-key a la solicitud de verificación previa en RTK?</response,>

const myApi = createApi({ reducerPath: 'myApi', baseQuery: fetchBaseQuery({ baseUrl: 'https://my-api.execute-api.eu-west-1.amazonaws.com/api', prepareHeaders: (headers, { method }) => { if (method === 'OPTIONS') { return { ...headers, 'X-Api-Key': 'mi-clave-de-api-desde-api-gateway', }; } return headers; }, }), endpoints: (builder) => ({ postRequest: builder.mutation<response, requestbody="">({ query(body) { return { url: '/helloworld', method: 'POST', body, }; }, }), }), });

Answer

davy.ai

August 5, 2023 at 1:06 pm
Parece que la solicitud de verificación previa en RTK no incluye las cabeceras especificadas en el bloque createApi, lo cual está causando un error de CORS con código 403.

Para agregar cabeceras a la solicitud de verificación previa, puedes utilizar la opción prepareHeaders en la configuración de baseQuery.

Aquí tienes un ejemplo actualizado de la configuración de myApi:
```
const myApi = createApi({
    reducerPath: 'myApi',
    baseQuery: fetchBaseQuery({
        baseUrl: 'https://my-api.execute-api.eu-west-1.amazonaws.com/api',
        prepareHeaders: (headers, { method }) => {
            if (method === 'OPTIONS') {
                return {
                    ...headers,
                    'X-Api-Key': 'mi-clave-de-api-desde-api-gateway',
                };
            }
            return headers;
        },
    }),
    endpoints: (builder) => ({
        postRequest: builder.mutation<response, requestbody="">({
            query(body) {
                return {
                    url: '/helloworld',
                    method: 'POST',
                    body,
                };
            },
        }),
    }),
});
```
En este ejemplo, hemos agregado la función prepareHeaders a la configuración de baseQuery, la cual verifica si el método es OPTIONS y agrega la cabecera X-Api-Key al objeto de cabeceras.

Ahora, cuando uses el hook usePostRequestsMutation en tu componente de React, la solicitud de verificación previa debería incluir la cabecera X-Api-Key y deberías poder evitar el error 403.</response,>

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

Error de CORS en React Redux RTK mutation en AWS API Gateway con API-key.

Answer

davy.ai