Chrome与Edge无法加载跨域SourceMap问题咨询

问题背景 #

本地启动配置：

Web container: http://127.0.0.1:8888/
sourcemap: http://127.0.0.1:9876/

属于跨域场景，近期浏览器更新后，Chrome/Edge DevTools无法显示GWT源码，控制台出现如下警告：

DevTools failed to load source map: Could not load content for http://127.0.0.1:8888/sourcemaps/GwtModule/gwtSourceMap.json: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

但实际代码中指定的源码映射路径为：

//# sourceMappingURL=http://127.0.0.1:9876/sourcemaps/GwtModule/gwtSourceMap.json

可见浏览器将源映射请求的端口从9876强制改写为8888。

原因判定 #

这是浏览器安全增强措施导致的，并非Bug。

Chrome和Edge在近期版本中强化了跨域资源的安全限制，针对源映射文件（source map），默认会阻止加载来自不同端口（跨域）的资源。为了规避跨域风险，浏览器会自动尝试从当前页面所在的域名（包含端口）去请求源映射文件，因此出现了端口被改写为Web容器端口8888的情况。

解决方案 #

• 同端口部署：将GWT SuperDevMode的源映射服务与Web容器部署在同一端口下，从根源消除跨域场景。
• 临时禁用限制：调试时可通过Chrome启动参数关闭相关安全策略，启动命令添加：--disable-features=CrossOriginOpenerPolicy,CrossOriginEmbedderPolicy（仅建议调试使用，生产环境禁用）。
• 反向代理配置：在Web容器中配置反向代理，将/sourcemaps路径的请求转发到http://127.0.0.1:9876/sourcemaps，让浏览器从同一端口请求源映射，避免跨域限制。

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