如何修复 - CORS错误，同时使用预先符号URL在CloudFlare R2上上传。-DEV365 开发者社区

该帖子最初是在我的博客上发布的。

Cloudflare R2存储允许开发人员存储大量的非结构化数据，而无需与典型的云存储服务相关的昂贵出口带宽费用。

在使用R2使用预设URL上传文件时，我开始在浏览器控制台中获取以下CORS问题：
“从原点访问''''http://localhost:3000已被CORS策略阻止：对飞行前请求的响应未传递访问控制检查：不存在'访问权限控制 - 供电 - 允许孔'标题。如果不透明的响应满足您的需求，请将请求模式设置为“无核”，以通过禁用CORS来获取资源。”

这是我使用AWS-SDK用于JS V3解决的方法：

创建一个空节点项目并为JS V3安装AWS-SDK。

mkdir r2-cors && cd r2-cors
pnpm init
pnpm install @aws-sdk/client-s3 @aws-sdk/s3-request-presigner
touch cors.js

将type: "module"添加到您的package.json文件中。

接下来，将此摘要复制并粘贴到cors.js中，然后替换Cloudflare R2仪表板中的凭据。引用here创建令牌。

import { PutBucketCorsCommand, S3Client } from "@aws-sdk/client-s3";

const s3Client = new S3Client({
  region: "auto",
  endpoint: `https://${CF-ACCOUNT-ID}.r2.cloudflarestorage.com`, //TODO: replace
  credentials: {
    accessKeyId: `${ACCESS-KEY}`, //TODO: replace
    secretAccessKey: `${ACCESS-SECRET}`, //TODO: replace
  },
});

async function main() {
  const response = await s3Client.send(
    new PutBucketCorsCommand({
      Bucket: "your-bucket-name", //TODO: replace
      CORSConfiguration: {
        CORSRules: new Array({
          AllowedHeaders: ["content-type"], //this is important, do not use "*"
          AllowedMethods: ["GET", "PUT", "HEAD"],
          AllowedOrigins: ["*"],
          ExposeHeaders: [],
          MaxAgeSeconds: 3000,
        }),
      },
    })
  );
  console.dir(repsonse)
}

main();

然后用节点运行脚本：

node cors.js

如果一切正常，您应该在控制台中看到以下登录：

{
  '$metadata': {
    httpStatusCode: 200,
    requestId: undefined,
    extendedRequestId: undefined,
    cfId: undefined,
    attempts: 1,
    totalRetryDelay: 0
  }
}

就是这样，现在应该解决您的CORS问题。

如果您有任何疑问或只想联系，请在Twitter上关注我。