Question

我想向Cloudinary API发出HTTP请求以获取我帐户中的图片。必需的网址如下所示：

https://<<API KEY>>:<<API SECRET>>@api.cloudinary.com/v1_1/<<RESOURCE NAME>>/resources/image

当我从浏览器中访问该URL时，得到的就是我想要的东西，一个包含所有图片的漂亮JSON对象。

但是当我在React组件中点击url时，

componentDidMount() {
  this.props.fetchArt();
}

我收到以下错误：

TypeError: Failed to execute 'fetch' on 'Window': Request cannot be constructed from a URL that includes credentials:

动作创建者的样子

export function fetchArt() {
  const url = 'https://'+CLOUDINARY_KEY+':'+CLOUDINARY_SECRET+'@api.cloudinary.com/v1_1/prints20/resources/image';
  const request = fetch(url).then(res => res.json())
  return {
    type: FETCH_ART,
    payload: request
  }
}

链接到仓库：https://github.com/PantherHawk/prints20-2018

预先感谢一百万！

Answer 1

如果端点需要某种授权，则需要在请求的标题内传递该信息。使用基于安全HTTP的基本身份验证完成Cloudinary身份验证。您的Cloudinary API密钥和API机密用于身份验证。

fetch('https://api.cloudinary.com/v1_1/CLOUD_NAME/resources/image', {
  method: 'get',
  headers: {
    'Authorization': 'Basic ' + base64.encode(API_KEY + ":" + API_SECRET),
  },
}).then(res => res.json())

使用React Component从Cloudinary API提取请求失败

1 个答案: