使用ArcGIS JS 4.9在Node.js+Express中遇CORS跨域问题求助

问题根源 #

你遇到的CORS错误是因为目标ArcGIS服务器https://arcgis.tpgos.gov.taipei未返回Access-Control-Allow-Origin响应头，浏览器同源策略阻止了前端直接请求其资源。你尝试的MutationObserver方案无效，是因为ArcGIS JS API在发起瓦片请求时就已确定跨域配置，等DOM节点被添加后再修改crossorigin属性，请求早已发出，无法改变结果。

可行解决方案 #

1. 搭建Express代理（最推荐，无需修改目标服务器配置）

通过Express作为中间层代理瓦片请求，绕过浏览器同源限制：

• 在你的Express项目中添加代理路由（需先安装request或node-fetch依赖）：

  const express = require('express');
  const request = require('request');
  const app = express();
  
  // 代理ArcGIS服务请求
  app.get('/arcgis-proxy/*', (req, res) => {
    const targetUrl = `https://arcgis.tpgos.gov.taipei/arcgis/rest/services/${req.params[0]}`;
    // 转发请求并返回响应
    req.pipe(request(targetUrl)).pipe(res);
  });
  
  app.listen(3070, () => console.log('Server running on port 3070'));
  

• 修改TileLayer的URL为代理地址：

  esriConfig.request.trustedServers.push("http://localhost:3070"); // 信任本地代理服务器
  ...
  newBasemap = new TileLayer({
    url: "/arcgis-proxy/ED/GD_Plain_Service/MapServer",
    crossOrigin: 'anonymous',
    spatialReference: { wkid: 102443 }
  });
  

2. 配置目标ArcGIS服务器的CORS（若有权限）

如果你能访问目标ArcGIS服务器的管理后台，可添加你的前端域名到CORS允许列表：

• 登录ArcGIS Server Manager，进入站点 > 跨域资源共享(CORS)
• 添加你的前端应用域名（比如http://localhost:3000）到允许的源列表
• 保存配置后，前端即可直接请求目标服务器资源

3. 修正trustedServers配置（前提：目标服务器已开启CORS）

你之前添加的是自己的服务器地址，需要把目标ArcGIS服务器地址加入信任列表：

esriConfig.request.trustedServers.push("https://arcgis.tpgos.gov.taipei");

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