I’m working of a S3 Navigator and trying to use Backblaze B2’s S3-compatible API in my Angular application to authenticate and list buckets using the AWS SDK’s S3Client. While this code works perfectly with other S3-compatible providers like Wasabi and IDrive E2, I am encountering a CORS error when attempting to interact with Backblaze B2. Despite configuring CORS rules to “Share everything in this bucket with every origin”, the error persists.
Below is my code that authenticate s3-compatible account and list buckets in account.
code is working fine in case of Wasabi and I-Drive E2 but not in case of BackBlaze B2:
Code:
import { S3Client, ListBucketsCommand } from '@aws-sdk/client-s3';
async authenticateAccount(
endpoint: string,
accessKeyId: string,
secretAccessKey: string
) {
console.log('s3 client used');
if (!/^https?:///i.test(endpoint)) {
endpoint = `https://${endpoint}`;
}
try {
new URL(endpoint);
} catch (error) {
console.error('Invalid endpoint URL:', endpoint);
throw new Error('Invalid endpoint URL');
}
console.log("entered url is", endpoint);
const s3 = new S3Client({
region: 'us-east-005', //buckets are in this region in backblazeB2
endpoint,
credentials: {
accessKeyId,
secretAccessKey,
},
forcePathStyle: true,
});
try {
const command = new ListBucketsCommand({});
const response = await s3.send(command);
return response;
} catch (error) {
console.error('Error getting bucket information:', error);
throw error;
}
}
Error I got:
Access to fetch at 'https://s3.us-east-005.backblazeb2.com/?x-id=ListBuckets' from origin 'http://localhost:4200' 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.
I have checked my Endpoint, Access Key ID and Secret Key ID multiple times they are correct as the same credentials works when used on s3 Browser.