如何让CloudFront-Viewer-Country显示在浏览器请求头中？

首先明确核心误区：浏览器控制台显示的「请求头」是你的浏览器发送给CloudFront的请求头，而你配置的源请求策略、Viewer Request函数、Origin Request函数添加的头，是CloudFront转发给源站（S3）的请求头，这些头不会出现在浏览器的请求头里。只有CloudFront返回给浏览器的响应头，才会在浏览器控制台的「响应头」区域显示。

针对你的配置逐一修正： #

1. CloudFront-Viewer-Country/City 头的问题 #

你配置的源请求策略是让CloudFront把这两个头转发给S3源站，所以这些头只会出现在CloudFront发给S3的请求中，不会出现在浏览器的请求或响应头里。如果想让浏览器拿到这些地域信息，需要：

• 创建一个Viewer Response阶段的CloudFront函数或Lambda@Edge函数，把地域信息添加到响应头中。
  示例CloudFront函数（关联到Viewer Response阶段）：

function handler(event) {
    const response = event.response;
    const viewerCountry = event.viewer.country;
    const viewerCity = event.viewer.city;
    
    response.headers['cloudfront-viewer-country'] = {value: viewerCountry};
    response.headers['cloudfront-viewer-city'] = {value: viewerCity};
    
    return response;
}

2. Viewer Request函数添加的viewer-ip头 #

你在Viewer Request阶段添加的viewer-ip头，是CloudFront转发给源站的请求头，浏览器无法看到。如果要让浏览器获取到客户端IP，同样需要在Viewer Response阶段把event.viewer.ip的值添加到响应头里。

3. Origin Request阶段的Lambda@Edge函数 #

你在Origin Request阶段添加的my-test-header是发给S3的请求头，浏览器也看不到。如果要让这个头出现在响应里，需要在Viewer Response阶段把它的值（直接在函数生成或从源站响应中获取）添加到响应头。

额外注意事项 #

• 确保函数关联的阶段正确：要修改返回给浏览器的内容，必须关联到Viewer Response阶段，而非任意Request阶段。
• 响应头命名要规范：尽量使用短横线分隔而非下划线，同时注意CloudFront对部分前缀头的限制规则。
• 测试时绕过缓存：修改配置后，可通过添加?nocache=1这类参数手动绕过CloudFront缓存，确保看到最新的配置效果。

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