如何移除S3+CloudFront静态网站重定向URL末尾的斜杠？

I've run into this exact issue before—S3's static website hosting has a habit of appending trailing slashes when handling redirects, especially when it thinks you're pointing to a "directory" path. Here's how to get that clean, slash-free redirect working:

Step 1: Ditch S3 Static Website Redirects (Use CloudFront Instead) #

The root problem is that S3's built-in static website redirect logic automatically adds trailing slashes for paths that resemble directories. Instead of relying on S3's redirect rules, handle the redirect directly at the CloudFront layer, which gives you full control over the target URL.

Option 1: CloudFront Functions (Low-Cost, Simple) #

CloudFront Functions are perfect for straightforward redirects like this—they're fast and cheap compared to Lambda@Edge.

1. Go to your CloudFront console, navigate to your distribution, and click the Functions tab.
2. Create a new function with this code:

function handler(event) {
    const request = event.request;
    // Return a 301 permanent redirect to your target URL (no trailing slash)
    return {
        statusCode: 301,
        statusDescription: 'Moved Permanently',
        headers: {
            'location': { 
                value: 'https://www.externaldomain.com/id12345' 
            }
        }
    };
}

3. Publish the function, then associate it with your CloudFront distribution's default behavior (or the specific path behavior if you only want this redirect for certain paths). Set the trigger type to Viewer Request—this way, CloudFront returns the redirect immediately without hitting S3.

Option 2: Lambda@Edge (For More Complex Logic) #

If you need to add dynamic logic (like pulling the target URL from a header or query param), use Lambda@Edge instead. Create a Node.js Lambda function in the us-east-1 region with this code:

exports.handler = (event, context, callback) => {
    const request = event.Records[0].cf.request;
    const response = {
        status: '301',
        statusDescription: 'Moved Permanently',
        headers: {
            'location': [{
                key: 'Location',
                value: 'https://www.externaldomain.com/id12345'
            }]
        }
    };
    callback(null, response);
};

Publish the Lambda version, then associate it with your CloudFront distribution's Viewer Request trigger.

Step 2: Clean Up S3 Settings #

• Disable S3 static website hosting for your bucket (since we're handling redirects via CloudFront now).
• If you had an index.html file in the bucket (used for static website hosting), delete it—this can trigger S3's directory-style trailing slash behavior.
• Ensure your CloudFront origin points directly to the S3 bucket's REST API endpoint (not the static website endpoint) to avoid any leftover S3 redirect logic.

Step 3: Invalidate CloudFront Cache #

Old redirect responses might be cached by CloudFront, so you need to invalidate the cache to apply the new rules:

1. In your CloudFront distribution, go to the Invalidations tab.
2. Create a new invalidation with the path /* to clear all cached content.

Step 4: Test with a Private/Incognito Window #

Browser caching can also hold onto old redirects, so test the redirect in a private browsing window to make sure you're seeing the new, slash-free URL.

That should fix the trailing slash issue—you'll now get a precise redirect to https://www.externaldomain.com/id12345 without the extra slash.

内容的提问来源于stack exchange，提问作者OutFall