Как исправить "оценка была заблокирована политикой CORS: Нет 'Access-Control-Allow-Origin' в react
У меня есть веб-приложение с react frontend и django backend.
Некоторые API из бэкенда блокируются политикой cors, в то время как другие нет. Например, API для получения записей из блога
const res = await axios.get(`${process.env.REACT_APP_API_URL}/blog/posts`) возвращает данные, но API для отдельных постов const res = await axios.get(`${process.env.REACT_APP_API_URL}/blog/${slug}`); заблокирован. API для регистрации и входа также заблокированы. Я добавил домен в список разрешенных url в settings.py, но это не решило проблему.
Ошибка, которую я получаю на детальной странице, выглядит так:
undefined:1 Access to XMLHttpRequest at 'https://.api.example.co/blog/undefined' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Когда я использую Postman для тестирования API, все работает правильно. Но в приложении react только API со списком постов или элементов возвращает данные, остальные блокируются. Почему такое поведение и как это исправить?
Эта проблема состоит из двух частей. 1.в чем заключается проблема? 2.Как вы можете решить эту проблему полностью или частично? Я думаю, что ваша проблема связана с вашим бэкенд api, который не добавляет ваш хост для разрешения Host в их код. Когда вы запускаете свой проект, в вашей системе создается виртуальный хост, который вызывает ваш Api с вашего виртуального сервера, это как раз и является причиной того, что ваш запрос не был выполнен из вашего запущенного проекта и передан из postman. На самом деле изменение кода бэкенда или настроек веб-сервера, которые могут разрешить использование другого источника, может решить вашу проблему. Но если у вас нет доступа к команде бэкенда и вы хотите решить проблему самостоятельно, вы можете добавить расширение заголовка ядра браузера, которое может пропустить ваш запрос для вашего тестового случая. В конце я даю вам хорошее расширение для вашего браузера chrome. https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf?hl=en