hay 6 formas de hacer esto en React,

los números 1 y 2 y 3 son los mejores:

1-config CORS en el lado del servidor

2 conjuntos de encabezados manualmente como este:

 resonse_object.header("Access-Control-Allow-Origin", "*"); resonse_object.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");

3-config NGINX para proxy_pass que se explica aquí .

4-Omita la política de origen cruzado con la extensión chrom (¡solo para desarrollo y no recomendado!)

5-Omita la política de origen cruzado con la URL a continuación (solo para desarrollo)

 "https://cors-anywhere.herokuapp.com/{type_your_url_here}"

6-use proxy en su archivo package.json : (solo para desarrollo)

si esta es su API: http://45.456.200.5:7000/api/profile/

agregue esta parte en su archivo package.json : "proxy": "http://45.456.200.5:7000/",

y luego haga su solicitud con las siguientes partes de la API:

 React.useEffect(() => { axios .get('api/profile/') .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); });

Es mejor agregar el código de habilitación de CORS en el lado del servidor. Para habilitar CORS en la aplicación basada en NodeJS y ExpressJs, se debe incluir el siguiente código:

 var app = express(); app.use(function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); next(); });

Posible pregunta repetida de Cómo superar el problema CORS en ReactJS

CORS funciona agregando nuevos encabezados HTTP que permiten a los servidores describir el conjunto de orígenes que pueden leer esa información mediante un navegador web. Esto debe configurarse en el servidor para permitir dominios cruzados.

Puede resolver este problema temporalmente con un complemento de Chrome llamado CORS.