我有一个用于谷歌云存储桶的签名 URL,我想将它与 axios 一起使用来发出 PUT 请求。
当变量 signedURL 不为空时,通过 useEffect 调用我的 putFileData 函数。
const putFileData = async () => {
await axios
.put(signedURL, "HELLO TXT!!!!")
.then((response) => console.log(response))
.catch(err => {console.log("AXIOS ERROR: ", err)})
}
我使用 json 文件在存储桶上设置了 CORS 策略,当我查询存储桶的 cors 策略时,我得到:
[{"maxAgeSeconds": 360, "method": ["PUT"], "origin": ["http://localhost:3000"], "responseHeader": ["Content-Type"]}]
我的签名网址上的选项是:
const options = {
version: 'v4',
action: 'write',
expires: Date.now() + 15 * 60 * 1000, // 15 minutes
contentType: 'application/octet-stream',
};
但是我仍然无法从 http://localhost:3000 发出 PUT 请求。
我得到:
Access to XMLHttpRequest at 'mysignedurl' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
和:
PUT mysignedurl::ERR_FAILED
在 Chrome 开发人员工具的我的网络选项卡中,它显示请求已发出两次 - 第一次以状态 403 不成功,然后以状态 200 成功 - 但没有任何内容上传到存储桶。
我的签名网址是在我的 Cloud Functions 中使用此函数生成的:
async function generateV4UploadSignedUrl(bucketName, fileName) {
// These options will allow temporary uploading of the file with outgoing
// Content-Type: application/octet-stream header.
const options = {
version: 'v4',
action: 'write',
expires: Date.now() + 15 * 60 * 1000, // 15 minutes
contentType: 'application/octet-stream',
};
// Get a v4 signed URL for uploading file
const [url] = await storage
.bucket(bucketName)
.file(fileName)
.getSignedUrl(options)
return url;
};