axios 请求 cloudinary 客户端 CORS 策略错误

Question

我目前正在尝试通过客户端 post 到 cloudinary，但出现以下错误：

从源 'http://localhost:3000' 访问 'https://api.cloudinary.com/v1_1/dd5gloppf/add/image/upload' 处的 XMLHttpRequest 已被 CORS 策略阻止：请求的资源上不存在 'Access-Control-Allow-Origin' header。我基本上是在尝试 post 到 cloudinary 并取回我正在 posting 的图像的 url 到 api 所以我最终可以将它发送到我的服务器并存储它在我的后端。有谁知道我现在做错了什么？

我不确定如何处理来自 client-side 的 CORS 策略错误。我的代码如下：

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

function App() {
  const [image, setImage] = useState('')
  const [loading, setLoading] = useState(false)
  const url = 'https://api.cloudinary.com/v1_1/dd5gloppf/add/image/upload'
  const preset = 'ml_default'

  const onChange = e => {
    setImage(e.target.files[0])
  }

  const onSubmit = async () => {
    console.log('im running')
    const formData = new FormData()
    formData.append('file', image)
    formData.append('upload_preset', preset)
    try {
      setLoading(true)
      const res = await axios.post(url, formData, {
        'Access-Control-Allow-Origin': '*'
      })

      console.log(res)
      const imageUrl = res.data.secure_url
      console.log(imageUrl)
    } catch (err) {
      console.error(err)
    }
  }

  return (
    <>
      <div className='file-field input-field'>
        <div className='btn'>
          <span>Browse</span>
          <input type='file' name='image' onChange={onChange} />
        </div>
        <div className='file-path-wrapper'>
          <input className='file-path validate' type='text' />
        </div>
        <button onClick={onSubmit} className='btn center'>
          upload
        </button>
      </div>
    </>
  )
}

export default App

Answer 1

从客户端上传到 Cloudinary 绝对是可以的。作为 Cloudinary Upload Widget 背后的开发者，我可以向你保证:)

但是，如果您想要“签名”上传。这意味着一种确保只有“授权”代码才能上传到您的 Cloudinary 帐户的安全方法，您确实需要一个服务器组件，如 here and here 所述。

但是，出于 demo/dev 目的，您可以非常轻松地从浏览器上传到 Cloudinary。

看看这个 sandbox。

*** 编辑

要启用未签名的上传，您需要更改云设置（设置 -> 上传 -> 上传预设）。

您将拥有一个未签名的上传预设，其名称将是您在代码中使用的字符串

axios 请求 cloudinary 客户端 CORS 策略错误

Axios request to cloudinary client side CORS policy error

cloudinary

reactjs