AWS CloudFront返回地图瓦片HTTP 404错误如何阻止浏览器重复请求

1. 前端OpenLayers侧限制请求范围（最优解，从根源避免无效请求） #

范围设置不当是核心问题，直接在OpenLayers图层配置中限定瓦片的请求范围、缩放层级，OpenLayers会自动过滤所有超出范围的瓦片，完全不会发起无效请求，是性能最好的方案。
示例配置代码：

import { Tile as TileLayer } from 'ol/layer';
import XYZ from 'ol/source/XYZ';
import { fromLonLat } from 'ol/proj';

// 替换为你实际存储的瓦片覆盖的经纬度范围 [最小经度, 最小纬度, 最大经度, 最大纬度]
const validTileExtent = fromLonLat([100.0, 20.0, 120.0, 40.0]);

const mapTileLayer = new TileLayer({
  source: new XYZ({
    url: '你的CloudFront瓦片服务地址/{z}/{x}/{y}.png',
    // 限定仅请求范围内的瓦片
    extent: validTileExtent,
    // 限定仅请求你实际切片的缩放层级
    minZoom: 7,
    maxZoom: 16
  })
});

如果是自定义瓦片网格的场景，也可以直接给TileGrid对象配置extent属性，效果一致。

2. CloudFront配置404长缓存（低成本快速优化） #

如果存在部分合法范围内的瓦片确实缺失的场景，你可以直接在CloudFront配置404错误的长缓存，避免反复回源请求和浏览器重复请求：

• 进入CloudFront「自定义错误响应」配置页，新增404错误的处理规则
• 开启自定义错误响应，设置响应TTL为86400秒（1天）或更长的时长
• 可选配置响应头Cache-Control: public, max-age=86400，让浏览器也缓存404结果
  配置完成后，同一个缺失瓦片的请求只会回源S3一次，后续CloudFront和浏览器都会直接返回缓存的404，大幅降低无效请求开销。

3. 用CloudFront Function将404转为410（满足你原本的需求） #

如果必须返回410状态码让浏览器彻底停止请求缺失瓦片，可以用轻量的CloudFront Function实现，不需要修改S3配置，也不需要用到Lambda@Edge：

1. 在CloudFront控制台新建函数，填入如下代码：

function handler(event) {
  const response = event.response;
  // 将S3返回的404状态码转为410
  if (response.statusCode === 404) {
    response.statusCode = 410;
    response.statusDescription = 'Gone';
    // 配置超长缓存，让浏览器1年内不再请求该瓦片
    response.headers['cache-control'] = { value: 'public, max-age=31536000' };
  }
  return response;
}

2. 将函数关联到CloudFront分配的源响应（Origin Response） 触发事件即可，所有S3返回的404都会自动转换为410返回给浏览器。

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