Angular 16中Deck.gl TileLayer加载WMS图层时仅处理预检请求的CORS问题解决

首先得帮你纠正一个关键误解：浏览器发送的OPTIONS预检请求是自动完成的，根本不会进入你的getTileData函数逻辑。你现在看到的data.type === "cors"的响应，其实是符合CORS规则的正常GET请求返回结果，你反而把这些有效的响应给过滤掉了，这才是瓦片加载失败的核心原因。

问题根源 #

你代码里的这段判断完全是错误的，CORS类型的响应是跨域请求成功后的正常状态：

if (data.type === "cors") {
  // Every data response seems to be of type `cors` 😂😂
  return null;
}

当你的Angular应用从不同域名请求WMS服务时，浏览器会先发OPTIONS预检请求确认权限，这个过程是浏览器自动处理的，不会触发你的fetch回调。而后续成功的GET请求返回的response.type为cors，说明这个跨域请求是符合服务端CORS配置规则的，是完全有效的响应。

修复后的代码 #

把那段错误的判断移除，同时增加基础的错误处理逻辑，修改后的getTileData如下：

getTileData: async ({ bbox, signal }) => {
  const { west, south, north, east } = bbox as GeoBoundingBox;
  const params = [
    "?Request=GetMap",
    "&Service=WMS",
    "&crs=EPSG:4326",
    "&width=256",
    "&height=256",
    "&dpi=300",
    "&format=image/png",
    "&transparent=TRUE",
    `&BBOX=${[west, south, east, north].join(",")}`,
  ];
  const targetUrl = process.env.WMS_BASE + params.join("");
  
  try {
    const data = await fetch(targetUrl, { signal });
    
    if (signal?.aborted) {
      return null;
    }
    
    // 检查HTTP响应是否成功，避免服务端错误导致的无效数据
    if (!data.ok) {
      console.error(`WMS瓦片请求失败: ${data.status} ${data.statusText}`);
      return null;
    }
    
    // 直接用loaders.gl解析响应为图片数据
    return parse(data);
  } catch (error) {
    console.error("加载WMS瓦片时发生异常:", error);
    return null;
  }
},

额外注意事项 #

• 确认WMS服务端CORS配置：需要确保服务端允许你的Angular应用所在域名发起跨域请求，包括允许GET方法和相关请求头。
• 解析函数的备选方案：如果parse(data)出现解析问题，可以尝试先将响应转为Blob再传入：return parse(await data.blob());
• 信号中断处理：保留signal?.aborted的判断，能在瓦片不再需要时及时终止请求，避免不必要的资源浪费。

这样修改后，你的TileLayer就能正常加载WMS的瓦片数据了，不会再把有效的跨域请求错误过滤掉。

备注：内容来源于stack exchange，提问作者Jozef - Spatialized.io