Axios请求到Cloudinary客户端CORS策略错误 [英] Axios request to cloudinary client side CORS policy error

问题描述

我目前正在尝试通过客户端发布到cloudinary，并且出现以下错误:

CORS策略已阻止从来源"http://localhost:3000"访问"https://api.cloudinary.com/v1_1/dd5gloppf/add/image/upload"处的XMLHttpRequest:"Control-Allow-Origin"标头出现在请求的资源上.我基本上是想发布到cloudinary并找回要发布到api的图像的url，这样我最终可以将其发送到我的服务器并将其存储在我的后端.有人知道我目前在做什么错吗?

我不确定如何从客户端处理CORS政策错误.我的代码如下:

 从'react'导入React，{useState，useEffect}从'axios'导入axios函数App(){const [image，setImage] = useState('')const [loading，setLoading] = useState(false)const url ='https://api.cloudinary.com/v1_1/dd5gloppf/add/image/upload'const预设='ml_default'const onChange = e =>{setImage(e.target.files [0])}const onSubmit = async()=>{console.log('我正在运行')const formData =新的FormData()formData.append('file'，image)formData.append('upload_preset'，预设)尝试 {setLoading(真)const res = await axios.post(url，formData，{'访问控制允许来源':'*'})console.log(res)const imageUrl = res.data.secure_urlconsole.log(imageUrl)} catch(err){console.error(错误)}}返回 (<>< div className ='文件字段输入字段'>< div className ='btn'>< span>浏览</span>< input type ='文件'name ='图像'onChange = {onChange}/></div>< div className ='文件路径包装器'>< input className ='文件路径验证'type ='文本'/></div>< button onClick = {onSubmit} className ='btn center'>上载</button></div></>)}导出默认应用 

解决方案

从客户端肯定可以上传到Cloudinary.作为Cloudinary的

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

I am currently trying to post to cloudinary via client side and I am getting the following error:

Access to XMLHttpRequest at 'https://api.cloudinary.com/v1_1/dd5gloppf/add/image/upload' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. I am basically trying to post to cloudinary and get back the url of the image I am posting to the api so i can eventually send it to my server and store it on my back end. does anyone know what i am currently doing wrong?

I am unsure of how to deal with a CORS policy error from the client-side. My code is as follows:

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

解决方案

Uploading to Cloudinary is definitely possible to do from the client. As the developer behind Cloudinary's Upload Widget I can assure you that :)

However, if you'd like a "signed" upload. Meaning a secure way to ensure only "authorized" code can upload to your Cloudinary account, you do need a server component as explained here and here.

However, for demo/dev purposes, you can very easily upload to Cloudinary from the browser.

Check out this sandbox.

*** EDIT

To enable unsigned uploads, youd need to change your cloud settings (settings -> Upload -> Upload presets).

You will then have an unsigned upload preset, its name will be the string you use in the code

这篇关于Axios请求到Cloudinary客户端CORS策略错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！