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

【问题标题】：How to make api call to Instagram with axios without CORS error如何在没有 CORS 错误的情况下使用 axios 对 Instagram 进行 api 调用
【发布时间】：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。

任何帮助都会很棒。

【问题讨论】：

标签： reactjs cors frontend instagram-api axios

【解决方案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

【讨论】：

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