Приложение React не может связаться с бэкенд-приложением python на localhost на том же сервере

У меня есть публичная облачная виртуальная машина, которая имеет публичный IP, скажем 160.159.158.157 (на ней зарегистрирован домен). У меня есть приложение Django (бэкенд), которое поддерживает CORS и обслуживает данные через порт 8080. У меня есть приложение React, запущенное на той же VIM на другом порту (3000), которое обращается к приложению Django и должно создавать отчет.

Проблема в том, что когда я использую http://<domain-name>:8080/api/ или http://<public-ip>:8080/api/, мое приложение работает нормально, но когда я пытаюсь получить данные с localhost, например, http://localhost:8080/api/ или http://127.0.0.1:8080/api/, приложение React не может получить данные со следующей ошибкой:

Cross-Origin Request Blocked: Политика одинакового происхождения запрещает чтение удаленного ресурса по адресу http://127.0.0.1:8080/api/. (Причина: CORS-запрос не удался). Код состояния: (null).

.

Вот что я пробовал:

axios.get(baseURL, { headers: { 
  'Access-Control-Allow-Origin': '*',
  'Access-Control-Allow-Methods':'GET,PUT,POST,DELETE,PATCH,OPTIONS',
}

но это не сработало. Что мне делать?

Похоже, что вы перепутали, где должны быть эти заголовки. Вы устанавливаете их на запросе к бэкенду, но они должны быть установлены на ответе от бэкенда. В конце концов, было бы не очень хорошо с точки зрения безопасности, если бы кто-то, делающий запрос, мог просто сказать: "Да, я в порядке, вы должны мне доверять".

Проблема может быть где-то в вашем бэкенд-приложении Django, поэтому дважды проверьте конфигурацию CORS там.

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

Вернуться на верх