使用 REST API 上傳后“cors”類型的雲響應不正確（來自 React）

Question

我正在嘗試使用以下代碼使用直接 REST API 調用上傳圖像。 代碼在我的本地電腦 (localhost:3000) 上工作。

const cloudinaryUrl = 'https://api.cloudinary.com/v1_1/{my_id}/image/upload';
const imageUrl = 'https://{test_image_url}/images/{image}.jpg';

const saveImage = async () => {
  try {
    const fd = new FormData();
    fd.append('file', imageUrl);
    fd.append('upload_preset', 'my_preset');
    fd.append('tags', 'browser_upload');

    const image = await fetch(`${cloudinaryUrl}`, {
      method: 'POST',
      body: fd
    });

    console.log('Response', image);

  } catch (err) {
    console.log('err', err);
  }
};

圖像保存成功，但響應不正確。 回應如下：

   {
     body: "",
     type: "cors",
     bodyUsed: false,
     status: 200,
     statusText: "OK",
     url: "https://api.cloudinary.com/v1_1/{my_id}/image/upload"
   }

正確的反應應該是這樣的：

{
 public_id: 'sample',
 version: '1312461204',
 width: 864,
 height: 564,
 format: 'jpg',
 created_at: '2017-08-10T09:55:32Z',
 resource_type: 'image',
 tags: [], 
 bytes: 9597, 
 type: 'upload', 
 etag: 'd1ac0ee70a9a36b14887aca7f7211737', 
 url: 'http://res.cloudinary.com/demo/image/upload/v1312461204/sample.jpg',
 secure_url: 'https://res.cloudinary.com/demo/image/upload/v1312461204/sample.jpg',
 signature: 'abcdefgc024acceb1c1baa8dca46717137fa5ae0c3',
 original_filename: 'sample'
}

如果有人知道如何解決我的問題，那就太好了。

Answer 1

您可以通過調用promise-based方法來獲取響應正文https://javascript.info/fetch

例如，您可以使用json()方法將響應解析為JSON 。

const image = await fetch(url, { method: "POST", body: formData });
const result = await image.json();
console.log('Response', result);