Reaccionar: error de red de Axios

Question 1

Esta es la primera vez que uso axios y encontré un error.

  axios.get(
    `http://someurl.com/page1?param1=1&param2=${param2_id}`
  )
  .then(function(response) {
    alert();
  })
  .catch(function(error) {
    console.log(error);
  });

Con la URL y los parámetros correctos, cuando verifico las solicitudes de red, de hecho obtengo la respuesta correcta de mi servidor, pero cuando abro la consola, veo que no llamó a la devolución de llamada, sino que detectó un error.

Error: seguimiento de la pila de errores de red: createError@http://localhost:3000/static/js/bundle.js:2188:15
handleError@http://localhost:3000/static/js/bundle.js:1717:14

Question 2

Si crea una API usando NodeJS

Su aplicación Express necesita usar CORS (intercambio de recursos de origen cruzado). Agregue lo siguiente a su archivo de servidor:

// This should already be declared in your API file
var app = express();

// ADD THIS
var cors = require('cors');
app.use(cors());

Para una comprensión más completa de CORS, lea el Documentación de Mozilla sobre CORS.

Question 3

mi problema era sobre la url que estaba solicitando. yo no había insertado http:// al principio de mi url. Quiero decir que estaba solicitando una URL como 92.920.920.920/api/Token en lugar de http://92.920.920.920/api/Token. agregando http:// resolvió mi problema

Question 4

Ocurre cuando trabajas en localhost y olvidaste agregar http://

uso incorrecto

  const headers = {
    "Content-Type": "application/json",
    Authorization: apiKey,
  };
  const url = "localhost:5000/api/expenses/get-expenses";

  axios.get(url, { headers });

  // NETWORK ERROR

el correcto es

  const headers = {
    "Content-Type": "application/json",
    Authorization: apiKey,
  };
  const url = "http://localhost:5000/api/expenses/get-expenses";

  axios.get(url, { headers });

  // WORKS FINE IF YOU HANDLED CORS CORRECTLY IN THE SERVER SIDE

Question 5

Además de la respuesta de @jacobhobson, también usé algunos parámetros para que funcionara.

app.use(cors({origin: true, credentials: true}));

Question 6

Estaba teniendo el mismo problema con la producción en la gota digital del océano. yo estaba usando axios en ReaccionarJS llamar Nodo.js API.

Aunque incluí cors

const cors = require('cors');
app.use(cors());

Pero aún tenía que agregar

res.header( "Access-Control-Allow-Origin" );

antes de llamar a mi controlador. Y funcionó para mí. Allí me di cuenta de que cors no funciona correctamente. Así que los desinstalé y los volví a instalar y ¡Funciona!

El código completo está aquí.

Así que o usas

 app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
  res.header("Access-Control-Allow-Headers", "x-access-token, Origin, X-Requested-With, Content-Type, Accept");
  next();
});

o usar

app.use(cors());

Es lo mismo.

Question 7

Recibí un error de red con axios 0.27.2 cuando intentaba cargar una imagen en nuestro servidor. Después de configurar encabezados como los siguientes, no se recibe ningún error.

headers:{"Accept":"application/json, text/plain, /","Content-Type": "multipart/form-data"}

y debe verificar con el tipo de cuerpo de su solicitud de API en su colección, como si se trata de datos de formulario o x-wwww-form-urlencoded o ..etc.

Question 8

En mi caso usé “https” en lugar de “http“, comprueba eso también.

Si crea una API usando NodeJS

¿Ha sido útil esta solución?