Estoy tratando de obtener datos de una API mía y recibo este mensaje de error en Chrome:
Access to fetch at 'https://myapi.amazonaws.com/accounts' from origin 'http://localhost:3000' has been blocked by CORS policy: Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response.Dado que es CORS, Chrome está realizando una solicitud de verificación previa de OPCIONES, que obtiene una respuesta 204 con los siguientes encabezados:
access-control-allow-credentials: true access-control-allow-origin: * access-control-max-age: 3600 access-control-request-headers: * access-control-request-method: GET, POST, PUT, PATCH, OPTIONS, DELETE apigw-requestid: R64AgjukPHcEJWQ= charset: utf-8 date: Tue, 10 May 2022 17:27:05 GMTLuego realiza la solicitud POST deseada con los siguientes encabezados:
accept: application/json authorization: Bearer some.very.long.string Referer: http://localhost:3000/ sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="101", "Google Chrome";v="101" sec-ch-ua-mobile: ?0 sec-ch-ua-platform: "macOS" User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.54 Safari/537.36Y finalmente, aquí está el código base para la solicitud (JS Fetch API):
const result = await fetch(`${process.env.MY_API_URL}/accounts`, { method: 'POST', mode: 'cors', headers: new Headers( Accept: 'application/json', 'Accept-Encoding': 'gzip, deflate, br', Connection: 'keep-alive', Authorization: `Bearer ${accessToken}`, ), body: JSON.stringify({ accountId, name, }), }) if (!result.ok || result.status !== 200) throw new Error("Couldn't get data") const jsonResponse = await result.json() return jsonResponse¿Alguna idea de lo que podría estar pasando?
Debe configurar access-control-allow-headers en la respuesta de verificación previa, por ejemplo:
access-control-allow-headers: *Puede leer más sobre Access-Control-Request-Headers y Access-Control-Allow-Headers
los encabezados
access-control-request-headers: * access-control-request-method: GET, POST, PUT, PATCH, OPTIONS, DELETE pertenecen a la solicitud, no a la respuesta. Probablemente también necesite establecer access-control-allow-methods en la respuesta de verificación previa, por ejemplo:
access-control-allow-methods: GET, POST, PUT, PATCH, OPTIONS, DELETE