firebase 存储上的 CORS

Question

当我对 html 文件进行 get 调用时，我的 firebase 存储出现正常的 cors 错误：

Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers in preflight response.

我正在使用 axios 进行通话：

axios.get('https://firebasestorage.googleapis.com/v0/b/xxxxx-xxxxx.appspot.com/o/files%2Fsigning%2F148%2F459.html?alt=media&token=f3be2ef2-a598-4c30-a77b-8077e8b1f7bc',
{
   headers: {'Access-Control-Allow-Origin': '*',}
)

我将访问权限设置为公开：

service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write;
    }
  }
}

当我加载图像时，相同的设置工作正常，但它给我存储的 html 文件的错误。关于如何修复它有什么想法吗？

Answer 1

Firebase 使用与 google cloud 相同的存储基础设施，即使没有 firebase 方法来设置 cors 规则，您也可以使用 gc 设置。 首先你需要安装google cloud sdk：

curl https://sdk.cloud.google.com | bash

重新启动您的外壳：

exec -l $SHELL

初始化 gcloud。这将要求您选择您的帐户并进行身份验证。

gcloud init

然后创建一个包含以下内容的json文件

[
    {
      "origin": ["http://example.appspot.com"],
      "responseHeader": ["Content-Type"],
      "method": ["GET", "HEAD", "DELETE"],
      "maxAgeSeconds": 3600
    }
]

并使用您的 firebase storage gc:endpoint 运行此命令

gsutil cors set yourFile.json gs://yourProject

这也应该可以解决你的问题。

Answer 2

Adam Boostani 先生的回答在我更改 json 文件代码行后确实有效：

https://firebase.google.com/docs/storage/web/download-files#cors_configuration

Firebase 使用与 google cloud 相同的存储基础设施，即使没有 firebase 方法来设置 cors 规则，您也可以使用 gc 设置。首先你需要安装google cloud sdk：

curl https://sdk.cloud.google.com | bash

重新启动你的外壳：

exec -l $SHELL

初始化 gcloud。这将要求您选择您的帐户并进行身份验证。

gcloud init

然后创建一个包含以下内容的json文件

[
    {
      "origin": ["*"],
    "method": ["GET"],
    "maxAgeSeconds": 3600
    }
]

并使用您的 firebase storage gc:endpoint 运行此命令

gsutil cors set yourFile.json gs://yourProject

这也应该可以解决你的问题。 它修好了，谢谢 Adam Boostani 先生

Answer 3

初始化应用程序后，您需要使用 setCorsConfiguration 方法

// Imports the Google Cloud client library
const {Storage} = require('@google-cloud/storage');

// Creates a client
const storage = new Storage();

/**
 * TODO(developer): Uncomment the following lines before running the sample.
 */
// The ID of your GCS bucket
// const bucketName = 'your-unique-bucket-name';

// The origin for this CORS config to allow requests from
// const origin = 'http://example.appspot.com';

// The response header to share across origins
// const responseHeader = 'Content-Type';

// The maximum amount of time the browser can make requests before it must
// repeat preflighted requests
// const maxAgeSeconds = 3600;

// The name of the method
// See the HttpMethod documentation for other HTTP methods available:
// https://cloud.google.com/appengine/docs/standard/java/javadoc/com/google/appengine/api/urlfetch/HTTPMethod
// const method = 'GET';

async function configureBucketCors() {
  await storage.bucket(bucketName).setCorsConfiguration([
    {
      maxAgeSeconds,
      method: [method],
      origin: [origin],
      responseHeader: [responseHeader],
    },
  ]);

  console.log(`Bucket ${bucketName} was updated with a CORS config
      to allow ${method} requests from ${origin} sharing 
      ${responseHeader} responses across origins`);
}

configureBucketCors().catch(console.error);

这是我使用 NestJs 的示例

import { ConfigService } from '@nestjs/config';
import * as admin from 'firebase-admin';

const configureBucketCors = async (app) => {
  const configService: ConfigService = app.get(ConfigService);

  return admin
    .storage()
    .bucket(configService.get<string>('BUCKET_NAME'))
    .setCorsConfiguration([
      {
        origin: ['http://localhost:3000'],
        responseHeader: ['Content-Type'],
        method: ['GET', 'HEAD', 'DELETE'],
        maxAgeSeconds: 3600,
      },
    ]);
};

export default async (app) => {
  const configService: ConfigService = app.get(ConfigService);
  await admin.initializeApp({
    databaseURL: configService.get<string>('FIREBASE_DATABASE_URL'),
    storageBucket: configService.get<string>('BUCKET_NAME'),
  });

  await configureBucketCors(app);
};

查看文档了解更多详细信息 https://cloud.google.com/storage/docs/cross-origin

https://cloud.google.com/storage/docs/configuring-cors#storage_cors_configuration-nodejs

Answer 4

添加到上述解决方案中。

初始化 gcloud。运行以下命令后，它会要求进行身份验证。选择项目所在的 Gmail 帐户。选择适当的 Firebase 项目。

gcloud init

接下来创建一个包含以下内容的 json，确保将 origin 保留为 * 以允许任何 url 或输入域 url

[
    {
      "origin": ["*"],
      "responseHeader": ["Content-Type"],
      "method": ["GET", "HEAD", "DELETE"],
      "maxAgeSeconds": 3600
    }
]

接下来运行firebase存储桶名称。转到 Firebase Storage 并复制 Firebase 存储桶名称并替换为以下命令

gsutil cors set yourFile.json gs://<storage-bucket-name>