无法修复 Google Cloud 存储上的 CORS 政策

Question

我正在尝试从 React 应用程序将文件上传到 Google 云存储的存储桶。我已为存储桶启用了 CORS 设置，但似乎我仍然无法从 Web 应用程序进行访问。我收到以下错误：

Access to fetch at 'https://storage.googleapis.com/my_unique_bucket/ABCdio%20Vi?GoogleAccessId=storage-ucardia%40ucardia-297520.iam.gserviceaccount.com&Expires=1612456695&Signature=oxb2LVj22hc4%2FsnskKIwaq%2BK9qq88yAmnAGN1pbRJ%2BPJ2d68%2BHRRBYS24xPNwBLSkVktsjSWTBBoWv5tTkCuUAzG3Q2Q51gLdoaLUmFyGt8a4hgKJ94DeTaAJL0Hf0rwz0sNx6SkSdqrrQF%2BGlRH4HYI10JBQHuw3%2BQMPIW%2FRXTlfcvjdCkdRT9vX6twjBrC4bdIijvB31SvxbipQHWuhh6QjlKtybp3OW8kV2tY00KNWv0pE98%2FCRDBikzVkyZwM8WOYEXWUuxY9lem9LYjkBo%2BafQECApvkTQVjg%2FWJo%2BUCTVpnO5wKL58BN2QCqkmG%2FIPAwg0ptQJVMcxFhfCZw%3D%3D' from origin 'https://dashboard-fe.uc.r.appspot.com' 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. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

JSON 文件中的 CORS 设置如下：

[]

但是，我也尝试过在 JSON 中指定 Web URL 和 PUT 方法的设置，但没有成功。

更新1：

Node.js API：

const storage = new Storage({
    keyFilename: path.join(__dirname, '../../../projectId.json'),
    projectId: 'projectId',
});

storage.getBuckets().then((x) => {
    console.log(x);
});

const generateSignedUrl = async (req, res) => {
    const { filename, filetype } = req.query;
    // These options will allow temporary read access to the file
    const options = {
        version: 'v2', // defaults to 'v2' if missing.
        action: 'write',
        expires: Date.now() + 1000 * 60 * 60, // one hour
        contentType: 'application/x-www-form-urlencoded',
    };

    try {
        // Get a v2 signed URL for the file
        const [url] = await storage.bucket('my_unique_bucket').file(filename).getSignedUrl(options);

        res.status(ok).json({ data: url, message: GENERATE_SIGNED_URL_SUCCESS, status: true });
    } catch (error) {
        res.status(internalServerError).json({ error, status: false, message: GENERATE_SIGNED_URL_FAILED });
    }
};

Reactjs 客户端：

export const putFile = async ({ url, file }) => {
    const method = 'PUT';

    return await fetch(`${url}`, {
        body: file,
        method,
        headers: {
            // Accept: file.type,
            'Content-Type': file.type,
            'Access-Control-Allow-Origin': '*',
        },
    });
};

更新2： 此链接说这是 URL 形成的问题，但我从谷歌云存储 NPM 包中获取作为预签名 URL 的 URL。顺便说一句，我已经按照此链接设置了该机制，但似乎我遗漏了一些非常明显的东西。

Answer 1

抱歉我的回复延迟了。我注意到你的代码中有一些奇怪的东西。您的 JSON 文件中有此配置

[]

但是，在你的反应客户端中你有这个

headers: {
            // Accept: file.type,
            'Content-Type': file.type,
            'Access-Control-Allow-Origin': '*',
        }

如果您的 JSON 文件中有 []，则 您正在从存储桶中删除 CORS 。尽管如此，您仍在发送该值。您需要将其添加到您的 JSON 文件中才能在您的存储桶中设置 CORS。

[ { “起源”： [”*”]， “方法”：[“放置”] } ]

在这里您可以找到有关它的文章。

Answer 2

假设您已经尝试为您的存储桶设置 CORS 策略，但仍然没有解决办法，以下内容对我的情况有帮助：

根据这篇文章，Google 提供的公共 URL 本身并不设置 CORS 标头。在 URL 的域中包含您的存储桶名称应该可以解决此问题。

storage.googleapis.com/your-bucket ⬅ 不会有标头

your-bucket.storage.googleapis.com ⬅ 将有 cors 标头

例如：

当前网址： storage.googleapis.com/your-bucket-name/file-name.mov

新网址： your-bucket-name.storage.googleapis.com/file-name.mov