Публикация во внешний API вызывает CORS, но работает от Postman

Браузер ограничивает HTTP-запросы тем, что они находятся в том же домене, что и ваша веб-страница, поэтому вы не сможете использовать imgur api непосредственно из браузера, не столкнувшись с проблемой CORS.

Я конвертирую изображения в строки base64 и отправляю их через Postman, отлично работает.

Это связано с тем, что Postman не является браузером и не ограничивается политикой CORS.

Я пробовал много заголовков Access-Control-Allow-xxx, но ни один из них не работал.

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

Ошибка: доступ к выборке на "https://api.imgur.com/3/image" from origin 'http://localhost:3000' заблокирован политикой CORS: поле заголовка запроса Access-Control-Allow- Заголовки не разрешены Access-Control-Allow-Headers в предпечатном ответе.

Возможные решения вашей проблемы:

1. Если у вас есть доступ к внутреннему api, вы можете установить заголовок «Access-Control-Allow-Origin» на сервере и позволить своему приложению получить доступ к api, но, поскольку у вас не будет доступа к серверу imgur, вы, вероятно, сможете ' не делай этого.

2. Отключите CORS в браузере - вы можете использовать такой плагин, как: https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en. Этот обходной путь подходит для разработки. Плагин отключит ваши настройки CORS, и вы сможете нажать imgur apis.

3. Третье решение - использование прокси. Вы можете настроить небольшой сервер узла с помощью express. Затем вы попадете на свой собственный сервер node, который, в свою очередь, попадет в imgur api. Поскольку сервер node не является средой браузера, у него не будет проблем с CORS, и вы сможете получить доступ к imgur API таким образом. Это также причина, по которой вы смогли без проблем использовать API из Postman. Поскольку Postman не является браузерной средой, она не ограничивается политикой CORS.

Это потому, что Access-Control-Allow-Headers, Access-Control-Allow-Methods - это заголовки, которые использует сервер. Сервер добавляет заголовок с помощью промежуточного программного обеспечения.

Теперь представьте, что на сервере (в этом примере ниже - экспресс-сервер) с включенным CORS устанавливаются такие заголовки (по умолчанию):

app.use(function (req, res, next) {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
    res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, Content-Length, X-Requested-With, Accept');
});

И вы отправляете Access-Control-Allow-Headers со стороны клиента, и сервер видит это как заголовок, не внесенный в белый список.

Итак, в заголовках просто используйте это:

headers: {
    'content-type': 'application/json',
    'Authorization': 'Client-ID [my-client-id]'
}

Должно работать нормально.

Кстати, я думаю, что он работает с почтальоном, потому что:

• Почтальон не может установить определенные заголовки, если вы не установите это крошечное расширение захвата почтальона.
• Безопасность браузера останавливает запросы на перекрестное происхождение. Если вы отключите защиту Chrome, он будет выполнять любой запрос CORS без проблем.

Кроме того, согласно этому:

Я считаю, что, скорее всего, Chrome не поддерживает localhost для прохождения Access-Control-Allow-Origin - см. проблему с Chrome

Чтобы Chrome отправлял Access-Control-Allow-Origin в заголовке, просто укажите псевдоним вашего localhost в файле / etc / hosts на какой-то другой домен, например:

127.0.0.1   localhost yourdomain.com

Затем, если вы обращаетесь к своему скрипту, используя yourdomain.com вместо localhost, вызов должен быть успешным.

Примечание: я не думаю, что тип контента должен быть application/json, он должен быть похож на image/jpeg или что-то в этом роде. Или, может быть, не включайте этот заголовок, если он не работает.

У меня есть несколько наблюдений в моем собственном приложении, которые помогли мне решить эту проблему. У меня есть приложение узла в качестве серверной службы api и интерфейс, созданный на VueJS. Я установил свое приложение узла с помощью cors со списком конечных точек, которым разрешен доступ к моему приложению узла. Работа на моем локальном компьютере не вызывает никаких ошибок, пока я не загружу его на свой сервер.

вот мои среды Локальная среда

• Nodejs: 12.16.1
• ОС: Windows 10
• БД: MySQL
• Фреймворк сервера NodeJS: ExpressJS
• Модуль загрузки: Multer

Производственная среда

• Nodejs: 12.19.0
• ОС: Ubuntu 20.0.4
• БД: MySQL
• Фреймворк сервера NodeJS: ExpressJS
• Модуль загрузки: Multer
• nginx

Вот мои наблюдения, основанные на моем производственном приложении.

1. Когда я загружаю форму с изображением [500kb и выше] [post or put], появляется ошибка cors, но меньше этого, все прошло нормально.
2. Если я использую данные формы для отправки данных на сервер, я вижу 2 запроса на вкладке своей сети, ОПЦИИ и фактический запрос.
3. Фактический запрос не удался, но я увидел, что длина моего содержимого очень велика, что приводит меня к выводу, что мой запрос отклонен из-за большого количества данных, отправленных клиентом, которые мой сервер мог ограничить. Я знаю, что это может вводить в заблуждение, но решение, которое я сделал, работает, поэтому я не знаю, почему возникает проблема cors, даже если проблема заключается в ограничении данных.

МОЕ РЕШЕНИЕ: В моем конфигурационном файле nginx я увеличил значение client_max_body_size до 100M. Я считаю, что nginx имеет значение по умолчанию 1MB

1. Откройте /etc/nginx/sites-available/your-server-file, где your-server-file может быть как www.example.com или default.
2. Добавьте следующую строку в серверный блок. Вы можете установить любое значение, кроме 100M.

server {
    client_max_body_size 100M;
    ...
}

3. введите sudo systemctl restart nginx, чтобы перезапустить nginx.
4. введите sudo nginx -t, чтобы проверить, успешно ли внесены изменения.
5. Перезагрузите приложение, если вы используете pm2, и все готово.