Cloudflare R2 预签名上传与 CORS 排查：从签名到浏览器 PUT

https://<ACCOUNT_ID>.r2.cloudflarestorage.com

npm install @aws-sdk/client-s3 @aws-sdk/s3-request-presigner

import { randomUUID } from 'node:crypto';
import { S3Client, PutObjectCommand } from '@aws-sdk/client-s3';
import { getSignedUrl } from '@aws-sdk/s3-request-presigner';

const required = [
  'R2_ACCOUNT_ID', 'R2_ACCESS_KEY_ID',
  'R2_SECRET_ACCESS_KEY', 'R2_BUCKET',
];
for (const name of required) {
  if (!process.env[name]) throw new Error(`Missing ${name}`);
}

const client = new S3Client({
  region: 'auto',
  endpoint: `https://${process.env.R2_ACCOUNT_ID}.r2.cloudflarestorage.com`,
  credentials: {
    accessKeyId: process.env.R2_ACCESS_KEY_ID,
    secretAccessKey: process.env.R2_SECRET_ACCESS_KEY,
  },
  requestChecksumCalculation: 'WHEN_REQUIRED',
});

const allowedTypes = new Set(['image/jpeg', 'image/png', 'text/plain']);

export async function createUpload({ userId, contentType, size }) {
  if (typeof userId !== 'string' || !/^[a-zA-Z0-9_-]{1,80}$/.test(userId)) {
    throw new Error('Invalid user ID');
  }
  if (!allowedTypes.has(contentType)) throw new Error('Unsupported type');
  if (!Number.isSafeInteger(size) || size < 1 || size > 10 * 1024 * 1024) {
    throw new Error('File must be between 1 byte and 10 MiB');
  }

  const key = `uploads/${userId}/${randomUUID()}`;
  const uploadUrl = await getSignedUrl(
    client,
    new PutObjectCommand({
      Bucket: process.env.R2_BUCKET,
      Key: key,
      ContentType: contentType,
    }),
    {
      expiresIn: 300,
      signableHeaders: new Set(['content-type']),
    },
  );
  return { key, uploadUrl, contentType, expiresIn: 300 };
}

export async function uploadFile(file) {
  const contentType = file.type || 'application/octet-stream';
  const signed = await fetch('/api/uploads/presign', {
    method: 'POST',
    credentials: 'same-origin',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ contentType, size: file.size }),
  });
  if (!signed.ok) throw new Error(`Signing failed: ${signed.status}`);
  const { uploadUrl, key, contentType: signedType } = await signed.json();

  const uploaded = await fetch(uploadUrl, {
    method: 'PUT',
    headers: { 'Content-Type': signedType },
    body: file,
  });
  if (!uploaded.ok) throw new Error(`Upload failed: ${uploaded.status}`);
  return { key, etag: uploaded.headers.get('ETag') };
}

[
  {
    "AllowedOrigins": [
      "http://localhost:5173",
      "https://app.example.com"
    ],
    "AllowedMethods": ["PUT", "GET", "HEAD"],
    "AllowedHeaders": ["Content-Type"],
    "ExposeHeaders": ["ETag"],
    "MaxAgeSeconds": 3600
  }
]

curl -i -X OPTIONS "$UPLOAD_URL" \
  -H 'Origin: http://localhost:5173' \
  -H 'Access-Control-Request-Method: PUT' \
  -H 'Access-Control-Request-Headers: content-type'

printf 'hello R2\n' > demo.txt
curl -i --upload-file demo.txt "$UPLOAD_URL" \
  -H 'Origin: http://localhost:5173' \
  -H 'Content-Type: text/plain'