Fix AWS S3 Upload CORS Error (Frontend + .NET Core Example)

Vipin Mittal
6h
143
0
1

Article

⚠️ Common Problem

If you’re uploading files to AWS S3 directly from the browser using a pre-signed URL (via JavaScript and a .NET Core API), you’ve probably faced this frustrating error:

Access to fetch at 'https://your-bucket.s3.amazonaws.com/...' 
from origin 'http://localhost:3000' has been blocked by CORS policy: 
No 'Access-Control-Allow-Origin' header is present on the requested resource.

This happens because your S3 bucket does not allow requests from your frontend domain.

In this article, we’ll fix it step-by-step for both AWS S3 and your .NET Core API, with real working code and links to official AWS docs.

🧠 What is CORS?

CORS (Cross-Origin Resource Sharing) is a security feature of browsers that blocks JavaScript code from making requests to another domain unless explicitly allowed.

When your frontend (localhost:3000 or myapp.com) tries to upload to S3 (s3.amazonaws.com), the browser asks:

“Does this S3 bucket allow requests from my origin?”

If not, the request is blocked — even before reaching AWS.

🧱 Step 1. Configure CORS in Your AWS S3 Bucket

1️⃣ Go to your AWS S3 Console
2️⃣ Select your bucket → Permissions tab → Scroll to Cross-origin resource sharing (CORS)
3️⃣ Click Edit, and paste the following configuration:

[{
    "AllowedHeaders": ["*"],
    "AllowedMethods": ["GET", "PUT", "POST"],
    "AllowedOrigins": ["http://localhost:3000", "https://yourdomain.com"],
    "ExposeHeaders": ["ETag"],
    "MaxAgeSeconds": 3000}]

🧾 Explanation

Key	Description
`AllowedOrigins`	Domains allowed to access the bucket (add your frontend URLs)
`AllowedMethods`	HTTP methods allowed (PUT for upload, GET for fetch)
`AllowedHeaders`	Required when sending custom headers
`ExposeHeaders`	Lets browser read specific headers (e.g., ETag)
`MaxAgeSeconds`	Cache time for preflight results

🔗 Official AWS Docs: Configuring CORS for S3

⚙️ Step 2. Generate Pre-Signed URL in .NET Core API

Create an endpoint in your .NET Core project to generate a pre-signed URL:

using Amazon.S3;
using Amazon.S3.Model;
using Microsoft.AspNetCore.Mvc;
using System;

namespace AwsUploadDemo.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class S3UploadController : ControllerBase
    {
        private readonly IAmazonS3 _s3Client;
        private const string BucketName = "your-bucket-name";

        public S3UploadController(IAmazonS3 s3Client)
        {
            _s3Client = s3Client;
        }

        [HttpGet("generate-url")]
        public IActionResult GeneratePresignedUrl(string fileName)
        {
            var key = $"uploads/{Guid.NewGuid()}_{fileName}";

            var request = new GetPreSignedUrlRequest
            {
                BucketName = BucketName,
                Key = key,
                Verb = HttpVerb.PUT,
                Expires = DateTime.UtcNow.AddMinutes(10),
                ContentType = "image/jpeg"
            };

            var url = _s3Client.GetPreSignedURL(request);

            return Ok(new
            {
                uploadUrl = url,
                fileUrl = $"https://{BucketName}.s3.amazonaws.com/{key}"
            });
        }
    }
}

👉 This API safely generates a short-lived pre-signed upload URL that your frontend can use.

🖥️ Step 3. Upload File from JavaScript (Frontend)

Here’s a minimal HTML + JavaScript example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>AWS S3 CORS Fix Example</title>
</head>
<body>
  <h2>Upload Image to AWS S3</h2>
  <input type="file" id="fileInput" accept="image/*" />
  <button id="uploadBtn">Upload</button>
  <p id="msg"></p>

  <script>
    document.getElementById("uploadBtn").addEventListener("click", async () => {
      const file = document.getElementById("fileInput").files[0];
      if (!file) return alert("Please choose a file!");

      // Step 1: Ask API for presigned URL
      const res = await fetch(`https://localhost:5001/api/S3Upload/generate-url?fileName=${file.name}`);
      const data = await res.json();

      // Step 2: Upload directly to S3
      const uploadRes = await fetch(data.uploadUrl, {
        method: "PUT",
        headers: { "Content-Type": file.type },
        body: file
      });

      if (uploadRes.ok) {
        document.getElementById("msg").innerText = "✅ Upload Successful!";
        console.log("File URL:", data.fileUrl);
      } else {
        document.getElementById("msg").innerText = "❌ Upload Failed!";
      }
    });
  </script>
</body>
</html>

✅ Once your S3 CORS settings are correct, the upload will succeed directly from the browser.

🔐 Step 4. Enable CORS in .NET Core API (Optional)

If your frontend and backend run on different ports (e.g., React on 3000 and API on 5001), enable CORS in your .NET API as well.

In Program.cs:

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowFrontend", policy =>
    {
        policy.WithOrigins("http://localhost:3000", "https://yourdomain.com")
              .AllowAnyHeader()
              .AllowAnyMethod();
    });
});

builder.Services.AddControllers();
builder.Services.AddAWSService<IAmazonS3>();

var app = builder.Build();
app.UseCors("AllowFrontend");
app.MapControllers();
app.Run();

🧪 Step 5. Test and Verify

Run your .NET Core API (https://localhost:5001)
Serve your frontend app (http://localhost:3000)
Select a file and click Upload

✅ The file should appear in your S3 bucket → uploads/ folder.
✅ The browser console should show no CORS errors.

🧾 Common Mistakes & Fixes

Issue	Fix
❌ Still getting CORS error	Ensure `AllowedOrigins` includes exact domain, not `*` if using `PUT`.
❌ 403 Forbidden	Check IAM user permissions (`s3:PutObject` and bucket policy).
❌ Wrong Content-Type	Match `ContentType` between `.NET API` and JavaScript upload request.
❌ Mixed HTTP/HTTPS	Always use the same scheme (e.g., both HTTPS).

📚 References

🔗 AWS Docs – Configure CORS for S3
🔗 .NET AWS SDK for S3
🔗 MDN Web Docs – CORS Explained
🔗 Fix CORS Error in JavaScript Fetch

🚀 Summary

Step	Description
1️⃣	Add proper CORS JSON configuration in your S3 bucket
2️⃣	Create pre-signed URL API in .NET Core
3️⃣	Upload file directly from browser using `fetch()`
4️⃣	Enable CORS in your .NET API if needed
5️⃣	Test and confirm successful upload without CORS error

✅ Now your S3 uploads will work seamlessly from any frontend — React, Angular, or even plain HTML — with no CORS errors and secure access via pre-signed URLs.