如何正确设置CORS以将带有presignedUrl的文件上载到firebase存储区？
如何正确设置CORS以将带有presignedUrl的文件上载到firebase存储区？
提问于 2020-05-20 23:21:48
我一直试图上传一个图像直接从我的反应水疗到我的消防桶，但我不能正确配置cors。
我使用GCP控制台将muy桶中的cors配置设置为：
[
{
"origin": ["http://localhost:3000"],
"method": ["PUT"],
"responseHeader": [
"Content-Type",
"Access-Control-Allow-Origin",
"x-goog-resumable"],
"maxAgeSeconds": 3600
}
]但它在浏览器中不起作用，相反，它在邮递员中却如预期的那样工作。
我的应用程序实现如下：
首先，我在节点api中生成预先签名的url，如下所示：
const admin = require('firebase-admin');
const uuid = require('uuid');
admin.initializeApp({
credential: admin.credential.applicationDefault(),
storageBucket: "<BUCKET-NAME>"
});
var bucket = admin.storage().bucket();
const generateSignedUrl = async (userId) => {
const key = `${userId}/${uuid.v1()}.jpeg`;
const options = {
version: 'v4',
action: 'write',
expires: Date.now() + 5*60 * 1000,
contentType: 'image/jpeg'
};
const [ url ] = await bucket
.file(key)
.getSignedUrl(options);
return [url, key];
};然后，在spa中，我使用axios来执行put请求，以便使用从我的节点api提供的presignedUrl上传文件。
const config = {
headers: { 'Content-Type': 'application/octet-stream' }
};
await axios.put(presignedUrl, file, config);但是CORS错误出现了：
Access to XMLHttpRequest at 'https://storage.googleapis.com/...' from origin 'http://localhost:3000' has been blocked by CORS policy:
Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.回答 1
Stack Overflow用户
回答已采纳
发布于 2020-05-24 03:46:51
最后，我解决了我的问题，我在这里发布了答案，也许它可以帮助其他人。我有两个问题。
- 首先，我为所有请求发送了一个授权头，由于CORS配置，防火墙没有正确地分析它。我决定省略预签名上传请求的auth头，如：
。
delete axios.defaults.headers.common["x-auth-token"];- 第二，contentType标头设置错误，但是由于铬默认没有在网络选项卡(out-of-blink-cors)中显示选项请求，
No 'Access-Control-Allow-Origin' header is present..错误总是出现。一旦我发现了火狐的相关错误，我就把signedUrl生成的选项改为：
const options = {
version: 'v4',
action: 'write',
expires: Date.now() + 5*60 * 1000,
contentType: `image/${type}`
};其中类型是从水疗中心提供的上传图像的类型。
cors配置按照预期工作。
[{
"origin": ["http://localhost:3000"],
"method": ["PUT"],
"responseHeader": [
"Content-Type"
],
"maxAgeSeconds": 3600
}]页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61924577
复制相关文章
相似问题
腾讯云开发者
