Axios 请求云客户端 CORS 策略错误
Posted
技术标签:
【中文标题】Axios 请求云客户端 CORS 策略错误【英文标题】:Axios request to cloudinary client side CORS policy error 【发布时间】:2020-12-18 11:18:42 【问题描述】:我目前正在尝试通过客户端发布到 cloudinary,但出现以下错误:
CORS 策略已阻止从源“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
【问题讨论】:
【参考方案1】:绝对可以从客户端上传到 Cloudinary。作为 Cloudinary Upload Widget 背后的开发者,我可以向你保证 :)
但是,如果您想要“签名”上传。这意味着一种确保只有“授权”代码才能上传到您的 Cloudinary 帐户的安全方式,您确实需要一个服务器组件,如 here 和 here 所述。
但是,出于演示/开发目的,您可以非常轻松地从浏览器上传到 Cloudinary。
看看这个sandbox。
*** 编辑
要启用未签名上传,您需要更改云设置(设置 -> 上传 -> 上传预设)。
然后您将拥有一个未签名的上传预设,其名称将是您在代码中使用的字符串
【讨论】:
谢谢!如果我按照您的代码框示例进行操作,上传预设应该是什么样子 @CodeMonkey 我用你需要的信息更新了答案 @poeticGeek 我在尝试使用上传小部件时收到此错误。我们如何解决这个问题以正确加载脚本? “从源 'localhost:8000' 访问脚本在 'widget.cloudinary.com/v2.0/global/all.js' 已被 CORS 策略阻止:请求的资源上不存在 'Access-Control-Allow-Origin' 标头。当脚本未加载时,它不起作用并导致此问题“未捕获的 TypeError:widget.open 不是函数” 我在小部件加载中使用了 crossorigin="anonymous",这就是它出现 CORS 问题的原因,删除 crossorigin 即可解决问题以上是关于Axios 请求云客户端 CORS 策略错误的主要内容,如果未能解决你的问题,请参考以下文章
如何在客户端处理 CORS 错误(React-Redux-Axios)
使用 CORS 策略的 Sails、React 和 Axios 错误:请求的资源上不存在“Access-Control-Allow-Origin”标头