Desde mi aplicación React JS, necesito obtener datos de servidores en otros dominios. Sin embargo, la política de CORS me lo impide y no puedo obtener los datos.
Supongamos que mi aplicación React se ejecuta en localhost:3000 durante el desarrollo. Quiero hacer una llamada get/post a otro servidor que se ejecuta en http://myserver.com La URL a través de la cual quiero obtener los datos es http://ext-server.com/data/records?name=xyz
Instalé http-proxy-middleware a través de npm y lo usé en mi aplicación de reacción. Creó un archivo setupProxy.js en la carpeta src con el siguiente contenido:
const { createProxyMiddleware} = require("http-proxy-middleware") module.exports = app => { app.use( createProxyMiddleware('/data/records' , { target:'http://ext-server.com', changeOrigin: true }) ) }En la página de inicio de mi aplicación de reacción (firstpage.js) cuando se presiona http://localhost:3000, he agregado el siguiente fragmento de código al evento de botón que realiza la llamada get al http://ext-server. com
getTheData() { let url = "http://ext-server.com/data/records?name=" + encodeURIComponent(this.state.name); axios.get(url, { headers: { "Content-Type":"application/json;charset=UTL-8", "Access-Control-Allow-Origin": "*", Accept: "application/json", }, baseURL: 'http://ext-server.com' } ).then((response) => { console.log(response["access_token"]); }).catch(error) => { console.log("Error: ", error) }).then(function () { console.log("always call it") }); }En el paquete.json, he agregado:
"proxy": "http://ext-server.com", "homepage":"http://localhost:3000",Pero sigo recibiendo el siguiente error: el acceso a XMLHttpRequest en 'http://ext-server.com/data/records?name=' desde el origen 'http://localhost:3000' ha sido bloqueado por la política CORS.
¿Hay algo que me estoy perdiendo aquí? ¿Cuál es la forma correcta de usar este http-proxy-middleware? ¡Cualquier ayuda será muy útil! Gracias
Como puede ver en MDN , el encabezado "Access-Control-Allow-Origin": "*" es un encabezado de tipo de respuesta, esto significa que debe ir a la respuesta de su servidor. También le aconsejo que no use el símbolo * , sino que preferiría que coincida con el encabezado de origen en su Solicitud.
La política de CORS es única y administrada por el servidor web y su configuración. Para permitir solicitudes CORS, debe implementarse en el lado del servidor. No hay posibilidad de hacerlo desde su aplicación cliente.
Básicamente, es solo una configuración de encabezado (ejemplo a continuación para NodeJS):
res.header("Access-Control-Allow-Origin", "*")Enviar ese encabezado permitirá solicitudes de todos los dominios.