"Cross Origin Request Blocked" Похоже, решения не работают

Question

Фон

Я создаю приложение с полным стеком MERN как личный проект. Я использую клиентский интерфейс на локальном хосте: 3000 и сервер на локальном хосте: 5000.

Проблема

Все мои маршруты API работают должным образом, кроме запроса GET, router.get('/get-friends', ...), который запрашивает у mongoDB список документов коллекции. Вызов запроса get для Postman возвращает ожидаемый результат. Я решил написать простой запрос GET, который возвращает метод, и он прекрасно работает в моем браузере

При выполнении запроса get-friends в моем браузере я получаю следующий журнал:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:5000/api/users/get-friends/. (Reason: CORS request did not succeed)

То, что я уже пробовал

• Включение cors на моем сервере Express
• Включение предпусковой проверки cors
• Добавление прокси всервер из пакета клиента. json
• Переключение с Axios на метод fetch () от vanilla JS
• Отключение cors в моем браузере

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

Вот маршрут, о котором идет речь:

router.get('/get-friends', (req, res) =>{
  var species_ = req.body.species;
  var gender_ = req.body.gender;
  var neutered_ = req.body.neutered;

  // query db
  Friend.find({species: species_},{gender:gender_},{neutered:neutered_}).then((friends_) =>{
    if(!friends_){
      return res.status(404).send('query error, nothing returned');
    }
    return res.send(friends_);
  }).catch((e) =>{
    res.status(400).send(4);
  })
});

Вот репозиторий проекта и соответствующие файлы:

https://github.com/edgarvi/foster-friends/server.js (Express server)
https://github.com/EdgarVi/foster-friends/blob/master/routes/api/users.js (Routes for the express server)
https://github.com/EdgarVi/foster-friends/blob/master/client/src/components/layout/SearchFriends.js (React component which calls the server)

Буду рад любой помощи!

Answer 1

Спасибо всем за помощь и предложения. Пройдя несколько дней, я наконец нашел решение.

В моем реагирующем клиенте я сделал вызов API:

axios.get('http://localhost:5000/api/users/get-friends',
            {
                params: {
                    species: this.state.species,
                    gender: this.state.gender,
                    neutured: neutered_
            }}
        );

, а затем изменил запрос Mongoose так:

router.get('/get-friends', (req, res) =>{
  var species_ = req.query.species;
  var gender_ = req.query.gender;
  var neutered_ = req.query.neutered;

  // query db
  Friend.find({species: species_},{gender:gender_},{neutered:neutered_}).then((_friends) => {
    return res.send(_friends);
  })
});

Я неточно знаю, почему эти изменения сделали мой код, наконец, работающим, но еще раз, спасибо всем за помощь и предложения!

Answer 2

Я выдвинул на первый план возможные проблемы.

Причина: запрос CORS не был выполнен

HTTP-запрос, который использует CORS, не удался, так как не удалось установить соединение HTTP в сети илиуровень протокола. Эта ошибка не имеет прямого отношения к CORS, но является фундаментальной сетевой ошибкой.

> Во многих случаях она вызывается плагином браузера (например, блокировщиком рекламы или конфиденциальностью). защитник) блокирует запрос.

Другие возможные причины включают:

Попытка получить доступ к ресурсу https, имеющему недействительный сертификат, приведет к этой ошибке.

Попытка получить доступ к ресурсу http со страницы с происхождением https также приведет к этой ошибке.

Начиная с Firefox 68, страницам https не разрешен доступ к http://localhost,, хотя это может быть измененоОшибка 1488740.

> Сервер не ответил на фактический запрос (даже если он ответил на запрос предпечатной проверки). Одним из сценариев может быть разрабатываемая служба HTTP, которая запаниковала без возврата каких-либо данных.

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSDidNotSucceed