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

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

0 голосов
/ 08 декабря 2018

Я использую 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 не разрешен Access-Control-Allow-Headers в ответе перед полетом.

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

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

1 Ответ

0 голосов
/ 08 декабря 2018

Это потому, что 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.

Кроме того, в соответствии с this :

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

...