如何在AWS CloudFront+S3上将/foo重定向至/foo/？

针对你遇到的访问https://somesite.zz/foo（无尾斜杠）时相对路径失效的问题，完全可以通过CloudFront的配置来解决，下面是两种可行的方案：

方案一：使用CloudFront函数（推荐，轻量低成本） #

CloudFront函数可以在请求到达源站之前修改请求，实现无尾斜杠到带尾斜杠的重定向，步骤如下：

1. 登录AWS控制台，进入CloudFront服务页面，找到你的分发。
2. 切换到「函数」标签页，点击「创建函数」，选择「查看请求」事件类型，编写以下函数代码：

function handler(event) {
    const request = event.request;
    const uri = request.uri;

    // 判断条件：URI不以/结尾，且不是带后缀的文件（避免重定向.css/.js等资源）
    if (!uri.endsWith('/') && !uri.includes('.')) {
        return {
            statusCode: 301,
            statusDescription: 'Moved Permanently',
            headers: {
                location: { value: uri + '/' }
            }
        };
    }

    return request;
}

3. 发布该函数，然后回到你的CloudFront分发，在「行为」设置中，将这个函数关联到「查看请求」事件上。
4. 等待CloudFront分发部署完成（通常需要几分钟），之后访问https://somesite.zz/foo会自动重定向到https://somesite.zz/foo/，浏览器就能正确识别子目录，相对路径加载资源不再出错。

方案二：使用Lambda@Edge（适合复杂逻辑场景） #

如果需要更复杂的判断逻辑（比如先验证S3中是否存在对应的index.html文件再重定向），可以用Lambda@Edge：

1. 创建一个Lambda函数（需在us-east-1区域创建），编写以下代码：

exports.handler = async (event) => {
    const request = event.Records[0].cf.request;
    const uri = request.uri;

    if (!uri.endsWith('/') && !uri.includes('.')) {
        const redirectUri = uri + '/';
        return {
            status: '301',
            statusDescription: 'Moved Permanently',
            headers: {
                location: [{
                    key: 'Location',
                    value: redirectUri
                }]
            }
        };
    }

    return request;
};

2. 将该Lambda函数部署到CloudFront的「查看请求」事件上，等待分发生效即可。

注意事项 #

• 确保你的CloudFront源配置正确：如果使用S3静态网站托管，源地址要填S3的静态网站端点（比如bucket-name.s3-website-region.amazonaws.com），而不是S3桶的REST端点，这样S3的索引文档设置才能正常生效。
• 重定向使用301永久重定向，有利于搜索引擎优化和浏览器缓存。

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