reactjs - Axios 请求云客户端 CORS 策略错误
问题描述
我目前正在尝试通过客户端发布到 cloudinary,但出现以下错误:
从源“http://localhost:3000”访问“https://api.cloudinary.com/v1_1/dd5gloppf/add/image/upload”处的 XMLHttpRequest 已被 CORS 策略阻止:否“访问控制允许” -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
解决方案
推荐阅读
- spring-integration - 检测 RabbitMq 连接上的异常
- excel - 循环直到最后一行数据
- api - 用于呼叫和转录的 Twilio Salesforce 集成
- javascript - 播放时向视频添加字节
- flutter - 如何在颤动中为 BottomNavigationBar 提供 onPressed 操作?
- user-interface - wxPython - 将 BoxSizer 添加到 ScrolledPanel
- r - 特定列数据表中的占位符/单元格标签闪亮 r
- python - 如何在 Python 中循环使用 matplotlib 创建图例?
- android - 在最小化应用程序时在 webview 加载 url 时自动打开应用程序
- if-statement - 用于识别股票代码的 Tickerid 函数