Azure Web App部署Flask应用：ArcGIS JS报Can't find variable: require错误

排查方向及修复方法 #

• 确认ArcGIS JS脚本加载顺序
  本地正常但Azure出问题，大概率是脚本加载时机不对。要保证<script src="https://js.arcgis.com/4.22/"></script>在调用require()的代码之前完全加载。建议把这个脚本放在HTML的<head>里，或者用DOM加载完成事件包裹require调用，避免提前执行：

  document.addEventListener('DOMContentLoaded', function() {
    require(["esri/Map", "esri/views/SceneView"], function(Map, SceneView) {
      // 你的地图初始化逻辑
    });
  });
  

• 强制刷新缓存
  Azure部署后可能存在CDN或浏览器缓存旧资源，导致ArcGIS的AMD loader没加载到位。可以给脚本URL加个随机参数强制刷新：

  <script src="https://js.arcgis.com/4.22/?t=20240520"></script>
  

  同时手动清除浏览器缓存（Ctrl+Shift+R）后再访问页面。

• 检查页面源代码
  右键查看Azure部署后的页面源码，确认ArcGIS的脚本标签确实存在，没有因为Flask模板渲染错误被漏掉。

• 切换ES模块加载方式
  如果AMD的require始终有问题，试试ArcGIS JS的ES模块写法，不用依赖AMD loader：

  <script type="module">
    import Map from "https://js.arcgis.com/4.22/@arcgis/core/Map.js";
    import SceneView from "https://js.arcgis.com/4.22/@arcgis/core/views/SceneView.js";
  
    const map = new Map({ basemap: "topo-vector" });
    const view = new SceneView({
      container: "viewDiv",
      map: map,
      camera: { position: [ -118, 34, 5000 ] }
    });
  </script>
  

• 排查Azure CORS设置
  虽然本地没问题，但可以去Azure门户的App Service设置里检查CORS，确保允许https://js.arcgis.com的请求（一般CDN脚本不需要，但可以排除这个可能）。

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