Включить CORS из внешнего интерфейса в React с помощью axios?
Я использую React во внешнем интерфейсе и вызываю API из другого домена, которым я не владею. Мой запрос аксиом:
axios(requestURL, {
method: 'GET',
headers: {
'Access-Control-Allow-Origin': '*',
'Content-Type': 'application/json',
'Authorization': key,
withCredentials: true,
mode: 'no-cors',
}
Я продолжаю получать ту же ошибку: заголовок CORS «Access-Control-Allow-Origin» отсутствует. Это что-то, что я могу преодолеть из внешнего интерфейса? Я точно знаю, что люди используют этот API, так что это не может быть ошибка серверной части, верно? Я пытался запросить множество API, но ни один из них не работал с моим кодом. Я пытался использовать https://cors-anywhere.herokuapp.com, и он работал нормально в течение недели, я думаю, что сегодня он не работает. Я хочу, чтобы мой сайт работал 24/7, поэтому использование прокси не вариант
Ответы 3
Вы должны разрешить CORS из серверной части для отправки запросов.
Так что, если я не владелец бэкенда и у меня нет с ним контакта, я ничего не могу сделать?
@IdleSolution Вы можете настроить собственный сервер с включенным CORS, который будет прокси для реального бэкэнда.
да ты прав. Невозможно разрешить cors из фронтенда
К сожалению, вам нужно будет каким-то образом проксировать запрос. Запросы CORS будут заблокированы браузером по соображениям безопасности. Чтобы избежать этого, бэкэнд должен внедрить для вас заголовок allow origin.
Решения зависят от того, где вам нужно использовать прокси, для разработки или производства.
Среда разработки или производственный веб-сервер node.js
Самый простой способ сделать это в этом сценарии — использовать пакет 'http-прокси-промежуточное ПО' npm.
const proxy = require('http-proxy-middleware');
module.exports = function (app) {
app.use(proxy('/api', {
target: 'http://www.api.com',
logLevel: 'debug',
changeOrigin: true
}));
};
Производство - веб-сервер, к которому у вас есть полный доступ Проверьте следующую страницу, чтобы узнать, как включить такое проксирование на вашем веб-сервере:
https://enable-cors.org/server.html
Производство - Статический хостинг/веб-сервер без полного доступа
Если ваш хостинг поддерживает PHP, вы можете добавить php-скрипт, например: https://github.com/softius/php-кросс-доменный-прокси
Затем отправьте запрос из вашего приложения в скрипт, который перенаправит его и вставит заголовки в ответ.
Если ваш хостинг не поддерживает PHP К сожалению, вам придется полагаться на решение, подобное тому, которое вы использовали.
Чтобы не полагаться на сторонние службы, вам следует развернуть прокси-скрипт где-нибудь, который вы будете использовать.
Мои предложения:
Переехать на хостинг с поддержкой php :) (Netlify может быть решением, но я не уверен)
Например, вы можете развернуть собственный прокси-скрипт на основе node.js в Firebase (функции firebase), чтобы убедиться, что он не выйдет из строя волшебным образом, а бесплатный план может справиться с вашим количеством запросов.
Создайте бесплатную учетную запись Amazon AWS, где вы бесплатно получите самый маленький экземпляр на год, и запустите там сервер ubuntu с прокси-сервером nginx.
Здравствуйте, что такое «приложение»?
Можно использовать CORS-в любом месте. Это обратный прокси-сервер NodeJS, который добавляет заголовки CORS в проксируемый запрос.
Если я хочу добавить CORS в https://test-example.com, я бы сделал это следующим образом:
https://cors-anywhere-herokuapp.com/https://test-example.com
Какой API вы пытаетесь использовать? Обычно вы получаете ключ/токен.