POSTing к внешнему API бросает CORS, но это работает от Почтальона

Question

POSTing к внешнему API бросает CORS, но это работает от Почтальона

Я использую i mgur api для загрузки изображений через приложение узла js.

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

я использую node-fetch совершать звонки по API.

const fetch = require('node-fetch')
...
async uploadImage(base64image) {
        try {
            const url = 'https://api.imgur.com/3/image'
            const res = await fetch(url,
                {
                    method: 'POST',
                    body: { image: base64image },
                    headers: {
                        'content-type': 'application/json',
                        'Authorization': 'Client-ID [my-client-id]',
                        'Access-Control-Allow-Headers': 'Content-Type, Authorization, Access-Control-Allow-Headers',
                        'Access-Control-Allow-Methods': 'POST',
                    }
                }
            )

            console.log(res)
        } catch(err) {
            console.log(err)
        }
    }

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

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

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

42

javascript node.js cors imgur node-fetch

Источник

user6418529 08 дек '18 в 16:20

5 ответов

Другие вопросы по тегам javascript node.js cors imgur node-fetch

user9018497 07 сен '19 в 16:31 2019-09-07 16:31 · Answer 1 · 2019-09-07 16:31

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

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

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

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

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

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

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

Если у вас есть доступ к backend api, вы можете установить заголовок "Access-Control-Allow-Origin" на сервере и позволить вашему приложению получить доступ к api, но, поскольку у вас не будет доступа к серверу imgur, вы, вероятно, сможете ' не делай этого.
Отключите CORS в браузере - вы можете использовать плагин, например: https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en. Этот обходной путь подходит для разработки. Плагин отключит ваши настройки CORS, и вы сможете нажать imgur apis.
Третье решение - использование прокси. Вы можете настроить небольшой сервер узла с помощью express. Затем вы попадете на свой собственный сервер node, который, в свою очередь, попадет в imgur api. Поскольку сервер node не является средой браузера, у него не будет проблем с CORS, и вы сможете получить доступ к imgur API таким образом. Это также причина, по которой вы смогли без проблем использовать API из Postman. Поскольку Postman не является браузерной средой, она не ограничивается политикой CORS.

user1203844 08 дек '18 в 16:47 2018-12-08 16:47 · Answer 2 · 2018-12-08 16:47

Это потому что 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 Security, он будет прекрасно выполнять любой запрос 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 или что-то. Или, может быть, не включать этот заголовок, если он не работает.

user4626394 23 июл '21 в 19:05 2021-07-23 19:05 · Answer 3 · 2021-07-23 19:05

Согласно этой статье я использовал эту команду в Linux и НЕКОТОРЫХ (!) cross-origins исправлено.

google-chrome --disable-web-security --user-data-dir="/tmp/YOUR_TEMPORARY_PATH"

2

Источник

user4626394 23 июл '21 в 19:05

user11343319 06 дек '20 в 05:09 2020-12-06 05:09 · Answer 4 · 2020-12-06 05:09

В моем приложении есть несколько наблюдений, которые помогли мне решить эту проблему. У меня есть приложение узла в качестве серверной службы 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

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

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

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

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

server {
    client_max_body_size 100M;
    ...
}

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

user17507615 06 дек '21 в 06:26 2021-12-06 06:26 · Answer 5 · 2021-12-06 06:26

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

Возможные решения:

Вы можете передать заголовки в ответ (если у вас есть доступ к серверной части или запросите это у поставщика API)
Вы можете настроить промежуточное программное обеспечение, чтобы решить эту проблему.

Вы можете получить информацию отсюда