Axios и Twitter API

Question

У меня проблема с Axios и Twitter API.

Я сделал успешный запрос с помощью Почтальона (с установленным заголовком Авторизация - OAuth 1.0). Теперь я пытаюсь сделать то же самое, и все, что я получаю, это:

Failed to load https://api.twitter.com/1.1/lists/statuses.json: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 400.

Я также вижу в Network Chrome Tab, что только OPTIONS отправляется.

Вот так выглядит моя конфигурация axios (с измененными учетными данными;)):

const api = axios.create({
    baseURL: 'https://api.twitter.com/1.1',
    headers: {
      // Authorization was copied from the Postman headers
      Authorization: 'OAuth oauth_consumer_key="consumer_key",oauth_token="token",,oauth_signature_method="H,MAC-SHA1",,oauth_timestamp="1,515677408",,oauth_nonce="nonce",,oauth_version="1,.0",,oauth_signature="signature"',
    },
    withCredentials: true,
  });

  const getListStatuses = (owner_screen_name, slug) => {
    return api.get('/lists/statuses.json', { owner_screen_name, slug });
  };

Что мне не хватает?

Answer 1

Это проблема CORS, мера безопасности, принятая браузерами (которая объясняет, почему вы можете сделать это через Postman).

По сути, Chrome отправляет предварительный запрос на сервер, чтобы узнать, чего он ожидает, и сервер не возвращает ваш источник как приемлемый (заголовок Access-Control-Allow-Origin).

Как отметил @AndyPiper в комментариях, API Twitter не поддерживает CORS. Это означает, что ваш запрос будет работать, только если он сделан со стороны сервера, а не из браузера.