最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Axios and twitter API - Stack Overflow

programmeradmin0浏览0评论

I'm having an issue with axios and twitter API.

I made successful request using Postman (with Authorization header set - OAuth 1.0). Now I'm trying to do the same and all I get is:

Failed to load .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.

I also see in the Network chrome tab, that only the OPTIONS is being sent.

This is how my axios configuration looks like (with changed credentials ;)):

const api = axios.create({
    baseURL: '.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 });
  };

What am I missing?

I'm having an issue with axios and twitter API.

I made successful request using Postman (with Authorization header set - OAuth 1.0). Now I'm trying to do the same and all I get is:

Failed to load https://api.twitter./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.

I also see in the Network chrome tab, that only the OPTIONS is being sent.

This is how my axios configuration looks like (with changed credentials ;)):

const api = axios.create({
    baseURL: 'https://api.twitter./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 });
  };

What am I missing?

Share Improve this question asked Jan 11, 2018 at 13:57 mdmbmdmb 5,2939 gold badges51 silver badges97 bronze badges 1
  • 2 Twitter's API does not support CORS developer.mozilla/en-US/docs/Web/HTTP/CORS - so calling it from client-side Javascript is not really possible. – anon Commented Jan 11, 2018 at 14:05
Add a ment  | 

1 Answer 1

Reset to default 7

This is a CORS problem, a security measure adopted by browsers (which explains why you could do it via Postman).

Basically, Chrome sends the preflight request to the server to know what it is expecting, and the server isn't returning your origin as an acceptable one (Access-Control-Allow-Origin Header).

As @AndyPiper pointed out in the ments, Twitter's API does not support CORS. That means your request will only work if made from server-side, not from the browser.

发布评论

评论列表(0)

  1. 暂无评论