使用CloudFront作为反向代理：替代Apache BFF的CORS问题与配置需求

当前你用CloudFront函数返回302重定向的方案，和Apache的RewriteRule [P]反向代理本质不同——302会让浏览器直接请求外部API，触发跨域；而反向代理是CloudFront作为中间层转发请求，浏览器只与CloudFront通信，不存在跨域问题，这就是你遇到CORS问题的核心原因。以下是替代Apache规则的最优配置方案：

1. 配置CloudFront自定义源 #

给你的CloudFront分发添加一个自定义源，配置项如下：

• 源域名：api.backend.com（你的外部API网关实际域名）
• 协议：HTTPS
• 端口：443
• 其余保持默认即可

2. 创建Cache Behavior路由规则 #

新增一个Cache Behavior，匹配路径/api/*，关联刚才创建的自定义源，并配置关键项：

• 转发Cookie：选择「All」（或指定你需要的Cookie名称），确保前端Cookie能转发到后端，后端设置的Cookie也能回传给前端
• 转发Headers：至少勾选Origin、Cookie、Authorization（如果用到），保证CORS和身份验证逻辑正常
• 缓存策略：如果是需身份验证的API请求，建议选择「CachingDisabled」（禁用缓存），或创建包含Cookie作为缓存键的自定义策略

3. 编写Viewer Request函数实现反向代理逻辑 #

替换你当前的CloudFront函数，通过修改请求源和路径实现反向代理（而非302重定向）：

function handler(event) {
    const request = event.request;
    const apiDomain = 'api.backend.com';

    // 匹配/api开头的请求路径
    if (request.uri.startsWith('/api/')) {
        // 移除/api前缀，转换为后端API需要的路径
        request.uri = request.uri.replace(/^\/api\//, '/');
        
        // 修改请求的源为外部API网关
        request.origin = {
            custom: {
                domainName: apiDomain,
                port: 443,
                protocol: 'https',
                path: '',
                sslProtocols: ['TLSv1.2', 'TLSv1.3'],
                readTimeout: 30,
                keepaliveTimeout: 5,
                customHeaders: {}
            }
        };
        
        // 设置Host头为后端API域名，避免后端识别错误
        request.headers['host'] = { value: apiDomain };
    }

    return request;
}

将这个函数部署到CloudFront的Viewer Request阶段，并关联到/api/*的Cache Behavior。

4. 处理CORS与Cookie响应 #

如果外部API网关未返回正确的CORS响应头，或需要统一配置，可以编写Viewer Response函数补充相关配置：

function handler(event) {
    const response = event.response;
    const headers = response.headers;

    // 配置CORS允许的前端域名（替换为你的实际前端域名，或用*允许所有）
    headers['access-control-allow-origin'] = { value: 'https://your-frontend-domain.com' };
    // 允许的请求方法
    headers['access-control-allow-methods'] = { value: 'GET, POST, PUT, DELETE, OPTIONS' };
    // 允许携带的请求头（包含Cookie以支持身份验证）
    headers['access-control-allow-headers'] = { value: 'Content-Type, Cookie, Authorization' };
    // 允许携带凭证（必须设为true才能传递Cookie）
    headers['access-control-allow-credentials'] = { value: 'true' };

    // 修正后端返回的Cookie域名，使其指向CloudFront域名（确保前端会将Cookie发送给CloudFront）
    if (headers['set-cookie']) {
        headers['set-cookie'] = headers['set-cookie'].map(cookie => {
            return {
                value: cookie.value.replace(/Domain=[^;]+;/, `Domain=your-cloudfront-domain.com;`)
            };
        });
    }

    return response;
}

将这个函数部署到CloudFront的Viewer Response阶段，同样关联到/api/*的Cache Behavior。

5. 测试验证 #

• 发送前端请求到https://your-cloudfront-domain.com/api/xxx，检查请求是否被CloudFront转发到https://api.backend.com/xxx
• 验证CORS响应头是否正确返回，OPTIONS预请求能正常通过
• 验证首次请求后设置的Cookie，后续请求能正常携带并被后端识别

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