Как правильно назначить заголовки для получения запроса в Javascript

Question

Я довольно новичок в более продвинутых API, и я пытаюсь отправить запрос GET на внешний API, используя fetch, с соответствующими заголовками, как описано владельцем API.

Однако яЯ все еще получаю сообщение об ошибке 403 Forbidden, и кажется, что заголовки фактически не отправляются с запросом, поскольку Chrome DevTools показывает «Предварительные заголовки отображаются».

Я использую прокси-сервер CORS:https://cors -anywhere.herokuapp.com / , который работал с другими более простыми запросами API.

const proxy = 'https://cors-anywhere.herokuapp.com/';
const api = `${proxy}https://api-example.com`; // Obfuscated


// Generate the data
fetch(api, data = {}, {
    credentials: "include",
    method: "GET",
    headers: {
      Accept: "application/json",
      "Content-Type": "application/json",
      Authorization: "Bearer eLrw3eXlljyFRjaul5UoYZLNgpUeapbXSFKmLc5SVaBgv8azUtoKn7B062PjbYoS",
      "User-Agent": "any-name"
    },
    body: JSON.stringify(data)
})
    .then(response => {
        return response.text();
    })

Запрос API работает в Postman и использует curl, но с моим приложением яполучить 403 Запрещенный ответ.Как также упоминалось, в заголовках запросов отображаются только предварительные заголовки;ни один из заголовков, которые я установил.

Любая помощь будет высоко ценится.Спасибо!

Answer 1

API работает в Postman и curl, и если вы уверены, что отправляете все запросы и заголовки одинаково, то, вероятно, это проблема CORS. Вы не предоставили достаточно информации, чтобы действительно понять, так ли это.

Однако я пытаюсь объяснить, что я понимаю, как CORS работает для браузеров. Браузеры перед выполнением запроса (например, GET, POST, DELETE и т. Д.) Делают запрос OPTIONS. Если сервер, который обрабатывает запрос, видит, что запрос разрешен для этого хоста (с использованием источника и нескольких других факторов), сервер отвечает успешным ответом. Когда браузеры видят, что запрос OPTIONS выполнен успешно, браузер выполняет фактический запрос (GET, POST, DELETE и т. Д.).

Иногда для локальной разработки вам может потребоваться преодолеть это, поскольку localhost не будет поддерживаться сервером. В этом случае вы можете использовать расширения браузера, которые перехватывают ваши запросы xhr и проверяют успешный запрос OPTIONS для вашего браузера, и ваш браузер считает, что сервер ответил успешно на вызов OPTIONS, поэтому он разрешает вызов.

Отправка заголовков с вашим запросом не будет работать. Сервер api должен разрешить возвращение запроса опций со статусом 200, чтобы приложение могло выполнять этот вызов из браузера.

Все вышеперечисленное основано на том, что вы отправили запрос из браузера так же, как от почтальона или скручивания. Вы можете убедиться в этом, если вы используете приложение сетевого монитора, такое как Fiddler, если вы используете Windows. Если вы работаете в macOS или Linux, я не знаю такого инструмента, как Fiddler, должны быть инструменты, но поскольку я не работаю на этой платформе, я не могу предложить другой инструмент для мониторинга сети.