来自 Cloudinary 的 GET 请求失败。错误：请求的资源上不存在“Access-Control-Allow-Origin”标头

Question

我正在从 React 和 Vite 应用程序向 cloudinary API 发出请求。我不断收到这两个错误：

从源“https://7aac-2806-2a0-1400-85b6-f0cb-e8b0-4880-f0ed.ngrok”访问“https://api.cloudinary.com/v1_1/sombra/image/list”处的 XMLHttpRequest -free.app' 已被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头。

和

ImageGallery.jsx?t=1688258885347:26 GET https://api.cloudinary.com/v1_1/sombra/image/list net::ERR_FAILED 404（未找到）（我检查了很多次，云名称是正确的)

这是组件：

import { useEffect, useState } from 'react';
import axios from 'axios';

const ImageGallery = () => {
  const [images, setImages] = useState([]);

  useEffect(() => {
    const fetchImages = async () => {
      try {
        const response = await axios.get(
          'https://api.cloudinary.com/v1_1/sombra/image/list'
        );

        setImages(response.data.resources);
      } catch (error) {
        console.error('Error fetching images:', error);
      }
    };

    fetchImages();
  }, []);

  return (
    <div>
      <h1>Image Gallery</h1>
      <div>
        {images.map((image) => (
          <img
            key={image.public_id}
            src={image.secure_url}
            alt={image.public_id}
          />
        ))}
      </div>
    </div>
  );
};
export default ImageGallery;

我尝试建立一个隧道，因为显然这个错误很常见，并且可能是由我的电脑引起的。还尝试更新我的 vite.config.js 文件中的 CORS 规则，但似乎也不起作用。这是我粘贴的代码

 server: {
    proxy: {
      "/api": {
        target: "https://api.cloudinary.com/v1_1/sombra/image/list",
        changeOrigin: true,
        secure: false,
        rewrite: (path) => path.replace(/^\/api/, ""),
      },
    },
  },

请帮忙！！

Answer 1

您需要提供您的

API_KEY

、

API_SECRET

和您可以在仪表板上找到的

cloud_name

，并将其替换为下面 URL 中的值

import axios from 'axios';

const response = await axios.get("https://<API_KEY>:<API_SECRET>@api.cloudinary.com/v1_1/<cloud_name>/resources")

这里是文档的链接：从cloudinary获取资源

Answer 2

首先，您向 (

https://api.cloudinary.com/v1_1/sombra/image/list

) 发出请求的 API 端点与任何 Cloudinary API 端点都不匹配。

我假设您尝试调用 Admin API 的 Get Resources 方法来获取具有“resource_type”

image

和“type”

list

的资产列表。如果是这样，则请求 URL 缺少您的云名称后面的

resources

。换句话说，应该是：

https://api.cloudinary.com/v1_1/sombra/resources/image/list

不支持将管理 API 方法作为跨源请求的一部分进行调用（例如通过 AJAX/XHR 等），因此，您看到的 CORS 错误是预期的且是正确的响应。

管理 API 使用基本身份验证与您的云的

API Key

和

API Secret

。

API Secret

不应在客户端使用/公开，而只能在服务器端使用。

如果您想使用 Admin API 中的任何方法，您应该从后端服务器发出请求。您可以通过使用任何 HTTP 库直接调用 API 端点来执行此操作，也可以使用 Cloudinary 的后端 SDK 之一来执行调用。 SDK 为 Cloudinary 的 API 提供了包装器，包括 Admin，您只需调用要调用的 API 的专用方法并传递其所需的参数，而无需自己构造请求。

Answer 3

确保将 your_api_key 、 your_api_secret 和 cloud name 替换为您的实际 Cloudinary 凭据。

要获取 JSON 数据，请使用以下 URL：

https://<API_KEY>:<API_SECRET>@api.cloudinary.com/v1_1/<CLOUD_NAME>/resources/image

输出将类似于以下结构：

{
"resources": [
{
  "asset_id": "***",
  "public_id": "***",
  "format": "jpg",
  "version": 1725557946,
  "resource_type": "image",
  "type": "upload",
  "created_at": "***",
  "bytes": 207897,
  "width": 1000,
  "height": 560,
  "asset_folder": "***",
  "display_name": "***",
  "access_mode": "public",
  "url": "***",
  "secure_url": "***"
}], "next_cursor": "****"}