如何在没有 CORS 错误的情况下使用 axios 对 Instagram 进行 api 调用

Posted 2023-03-04

【中文标题】如何在没有 CORS 错误的情况下使用 axios 对 Instagram 进行 api 调用

【英文标题】：How to make api call to Instagram with axios without CORS error

【发布时间】：2018-03-18 20:13:18

【问题描述】：

componentDidMount() 
let token = this.getAccessToken('access_token');

let config = 
  headers: 
    'Access-Control-Allow-Origin': '*',
    'Content-Type': 'application/json',
    Accept: 'application/json'
  


if (token) 
  axios.get('https://api.instagram.com/v1/users/self/?access_token=' + token, config)
    .then(res => 
      console.log(res)
    )
    .catch(err => 
      console.log(err)
    )

尝试调用 Instagram 的 API，但我不断收到此错误：

我正在使用 React。

任何帮助都会很棒。

【参考方案1】：

我认为 Instagram 不支持跨源请求。他们确实支持 jsonp。

Access-Control-Allow-Origin with instagram api

instagram jquery ajax type="GET, can't get around CORS

【讨论】：

是的，我使用 jsonp 与 jQuery 一起工作，但 axios 不支持 jsonp

这是对所提问题的正确答案。如果 axios 不支持 JSONP，那就是另一个问题（如果你想从前端 javascript 代码中使用 Instragram API，解决方案是不使用 axios）。而且你不需要 jQuery 来使用 JSONP——你只需要使用标准的 JavaScript 和 DOM 在 DOM 中创建一个script 元素并将其src 属性设置为https://api.instagram.com/v1/users/self/?access_token=' + token 值。

【参考方案2】：

您可以使用中间人在服务器端发出请求。当我搜索“no cors npm”时，有几个可供选择，但这里有一个示例：https://www.npmjs.com/package/cors

【讨论】：

理想情况下，您应该配置您的服务器以发送此请求，但如果您不想获得该技术，这很有效，它对于测试特别方便。