Реакция: ошибка сети Axios

Я впервые использую axios и обнаружил ошибку.

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

С правильным URL-адресом и параметрами, когда я проверяю сетевые запросы, я действительно получаю правильный ответ от своего сервера, но когда я открываю консоль, я вижу, что он не вызывал обратный вызов, а вместо этого обнаружил ошибку.

Ошибка: ошибка сети Трассировка стека: createError @ http://localhost:3000/static/js/bundle.js:2188:15 handleError @ http://localhost:3000/static/js/bundle.js:1717:14


reactjs javascript axios
person Mirakurun    schedule 31.08.2017    source источник
comment
Возможно, вы сможете узнать об этом больше, используя console.log(error.response.data).   -  person fnune    schedule 31.08.2017
comment
См. Этот ответ, он поможет вам узнать, в чем именно заключается ошибка stackoverflow.com/questions/44806333/   -  person Shubham Khatri    schedule 31.08.2017
comment
Ошибка @FaustoNA. Ответ не определен   -  person Mirakurun    schedule 03.09.2017
comment
@ShubhamKhatri, по-видимому, проблема в CORS   -  person Mirakurun    schedule 03.09.2017
comment
Замечательно, что вы смогли это понять. Но обрабатывайте ошибки с помощью аксиомов, как указано в опубликованной мной ссылке.   -  person Shubham Khatri    schedule 03.09.2017
comment
@ShubhamKhatri Мне все еще не удалось заставить его работать. Получаю статус: 0. Спасибо за совет по обработке ошибок.   -  person Mirakurun    schedule 03.09.2017

Ответы (8)


arrow_upward
40
arrow_downward

При создании API с использованием NodeJS

Ваше приложение Express должно использовать CORS (совместное использование ресурсов между источниками). Добавьте в файл сервера следующее:

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

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

Для более полного понимания CORS прочтите документацию Mozilla по CORS .

person jacobhobson    schedule 15.11.2017
comment
Я не использую Express. Я использую Axios в приложении ReactJS. Что я могу сделать, чтобы использовать CORS в axios? - person Ahmed; 13.08.2019
comment
Одним из важных моментов является добавление промежуточного программного обеспечения cors перед кодом, обрабатывающим запрос. - person Deniz Ozger; 25.08.2020
comment
СПАСИБО !, Спасение жизни. Я пытался запустить приложение angular, которое разговаривало с узлом с моего телефона, и это не сработало. Даже когда он работал с моего компьютера. Если узел не может найти модуль CORS, который не найден, просто запустите npm install cors. - person Ramon Araujo; 17.09.2020
comment
этот ответ применим также к NestJS, у меня такая же ошибка на стороне клиента, и мне пришлось добавить { cors: true } в NestFactory.create. - ,,,,, app = await NestFactory.create(AppModule, { cors: true }); - person Ofir G; 26.03.2021
comment
Я использую django. Как я могу решить эту проблему? - person Sumit; 02.05.2021

arrow_upward
10
arrow_downward

Моя проблема заключалась в URL-адресе, который я запрашивал. Я не вставил http:// в начале своего URL. Я имею в виду, что я запрашивал URL-адрес типа 92.920.920.920/api/Token вместо http://92.920.920.920/api/Token. добавление http:// решило мою проблему.

person Mahdieh Shavandi    schedule 30.04.2019
comment
Я использую это, я даже загружаю свое приложение nodejs на heroku - person tiedmud; 04.04.2020

arrow_upward
5
arrow_downward

В дополнение к ответу @jacobhobson я также использовал некоторые параметры, чтобы он работал.

app.use(cors({origin: true, credentials: true}));
person Tiago Barroso    schedule 28.11.2019

arrow_upward
3
arrow_downward

У меня была такая же проблема при производстве цифровой капли океана. Я использовал axios в ReactJS для вызова Node.js API.

Хотя я включил корс

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

Но мне все равно пришлось добавить

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

прежде чем вызвать моего диспетчера. И у меня это сработало. Там понял, что корс не работает должным образом. Я удалил и снова установил их, и все работает!

Полный код здесь.

Так что либо вы используете

 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();
});

или используйте

app.use(cors());

Это то же самое.

person Hassaan Rana    schedule 29.06.2020
comment
и где я должен включить cors `` const cors = require ('cors'); app.use (cors ()); ``? - person jhon; 04.07.2020
comment
Вы можете использовать его перед вызовом своих маршрутов в server.js или, если вы используете промежуточное программное обеспечение, вы можете поместить эти строки туда. P.S. Я тоже обновил свой ответ. - person Hassaan Rana; 14.07.2020

arrow_upward
2
arrow_downward

Убедитесь, что у вас одинаковый номер порта в cors({ origin : [ "http://localhost:3001"]}) и .env файле.

person tejas e    schedule 03.11.2020

arrow_upward
2
arrow_downward

Это случается, когда вы работаете на localhost и забыли добавить http: //

Неправильное использование

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

  axios.get(url, { headers });

  // NETWORK ERROR

Правильный -

  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
person Samil Kahraman    schedule 06.12.2020
comment
Спасибо за помощь +1 от меня - person Rajendran Nadar; 23.02.2021
comment
Из-за того, что я забыл о порте, он не работал, и это помогло мне подумать, спасибо! - person Jim; 23.03.2021

arrow_upward
0
arrow_downward

В моем случае это произошло, когда мое интернет-соединение было нестабильным. Убедитесь, что ваше интернет-соединение стабильно.

person Yuvraj Patil    schedule 08.12.2020

arrow_upward
0
arrow_downward

В моем случае я использовал https вместо http, проверьте и это.

person Amir Mehrnam    schedule 16.05.2021