如何解决Axios向云客户端CORS策略错误提出的请求
我目前正在尝试通过客户端发布到cloudinary,并且出现以下错误:
从CORP策略阻止从源“ http:// localhost:3000”访问“ https://api.cloudinary.com/v1_1/dd5gloppf/add/image/upload”处的XMLHttpRequest:无“访问权限- Control-Allow-Origin'标头出现在请求的资源上。 我基本上是想发布到cloudinary并找回要发布到api的图像的url,这样我最终可以将其发送到我的服务器并存储在我的后端。有人知道我目前在做什么错吗?
我不确定如何从客户端处理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
解决方法
绝对可以从客户端上载到Cloudinary。作为Cloudinary Upload Widget背后的开发人员,我可以向您保证:)
但是,如果您希望“签名”上传。这是确保仅“授权”代码可以上传到您的Cloudinary帐户的安全方法,您确实需要如here和here所述的服务器组件。
但是,出于演示/开发目的,您可以非常轻松地从浏览器上传到Cloudinary。
查看此sandbox。
***编辑
要启用未签名的上传,您需要更改云设置(设置->上传->上传预设)。
您将拥有一个未签名的上传预设,其名称将是您在代码中使用的字符串
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。