plugin - react cors

Error de CORS al hacer la llamada axios.get

Question

Estoy usando axios para hacer una llamada a axios.get en mi archivo redux action.js. En mi componente esta acción se realiza en el envío del formulario.

Estoy obteniendo el estado 200 en mi consola, pero no obtengo ninguna respuesta. Estoy recibiendo el siguiente error:

No ''Access-Control-Allow-Origin'' header is present on the requested resource. Origin ''http:////localhost:3000'' is therefore not allowed access.

¿Alguien se ha topado con tal error también? ¿Podría compartir sobre cómo resolver esto?

Answer 1

El problema no es con los axios. El problema es con el servidor. Cuando sirvas datos, debes agregar los siguientes encabezados, antes de enviarlos.

Access-Control-Allow-Origin se debe establecer en *

Los encabezados de control de acceso deben estar configurados en Origen, Solicitado con X, Tipo de contenido, Aceptar

Answer 2

La primera confusión que tuve al abordar este problema fue comprender lo que significa una solicitud de verificación previa. Así que empezaré desde allí.

Los navegadores envían solicitudes de verificación previa cuando una solicitud no cumple con estos criterios:

1. Los métodos HTTP coinciden con uno de (distingue mayúsculas y minúsculas):
   • OBTENER
   • ENVIAR
   • CABEZA
2. Coincidencias de encabezados HTTP (no distinguen mayúsculas y minúsculas):
   • Aceptar
   • Aceptar lenguaje
   • Lenguaje de contenido
   • ID del último evento
   • Tipo de contenido, pero solo si el valor es uno de:
     • aplicación / x-www-form-urlencoded
     • multipart / form-data
     • Texto sin formato

Las solicitudes de verificación previa se realizan con un método de OPCIONES que incluye tres encabezados adicionales que su servidor puede no esperar si no está configurado para CORS. Son:

• Acceso-Control-Permitir encabezados
• Acceso-Control-Permitir-Origen
• Acceso-Control-Permitir-Métodos

Si el servidor no está configurado para CORS, simplemente responde con un encabezado vacío con el código de estado HTTP 200. Una vez que haya configurado el servidor para CORS, debe incluir los encabezados mencionados anteriormente como encabezados admitidos por CORS.

Eso debería eliminar el error y permitirle comunicarse con el servidor.

Nota: si bien su servidor puede manejar el encabezado personalizado que creó (en mi caso, Authorization para autenticación JWT), lo más probable es que no esté configurado para la solicitud de CORS. Si tiene acceso a su servidor, simplemente averigüe cómo configurar CORS para ese servidor.

Para más información sobre CORS. Consulte https://www.html5rocks.com/en/tutorials/cors/