移动端跨域资源加载失败？检查 Cross-Origin-Resource-Policy 响应头
当移动端网页无法加载跨域资源时，应检查目标资源是否设置了 Cross-Origin-Resource-Policy 响应头，该头会限制不同源的 no-cors 请求读取响应体。
确认资源加载失败的具体表现
在移动端浏览器中打开开发者工具的 Network（网络）面板，筛选出状态码为 0 或 opaque 的请求。这种请求通常被称为 no-cors 请求，它们在跨域场景下默认无法读取响应体，导致页面上的图片、脚本或样式无法正常显示或执行。如果发现某些跨域资源请求状态为 0，且页面元素缺失，这通常是 CORP 策略生效的典型表现。
除了开发者工具，还可以直接观察页面元素的渲染情况。例如，如果页面中的第三方图标不显示，或者通过 script 标签加载的跨域库没有报错但也没有执行，这表明请求可能被 CORP 策略拦截了响应内容。此时需要进一步检查服务器是否配置了 Cross-Origin-Resource-Policy 响应头，以及该头部的具体值是否符合预期。
排查 Cross-Origin-Resource-Policy 的三种取值
使用 curl 命令或浏览器开发者工具的 Headers（响应头）选项卡，检查目标资源的响应头中是否包含 Cross-Origin-Resource-Policy。该头部通常有三个可选值：same-site、same-origin 和 cross-origin。如果头部存在且值为 same-site 或 same-origin，且请求来源与资源不在同一站点或源，浏览器将拒绝读取响应体，导致资源加载失败。
如果头部值为 cross-origin，则允许任何来源的请求读取资源，这通常用于配合 Cross-Origin-Embedder-Policy 使用。如果头部不存在，则遵循浏览器的默认同源策略。需要注意的是，CORP 仅对 no-cors 请求生效，对于正常的 CORS 请求（如设置了 Access-Control-Allow-Origin 的请求）不会产生阻断作用。
验证 CORP 策略对 no-cors 请求的影响
在开发者工具的 Console（控制台）中，尝试通过 fetch API 发起一个跨域请求，并设置 mode 为 'no-cors'。如果服务器返回了 Cross-Origin-Resource-Policy: same-origin 头部，那么请求的状态将变为 0，且无法在控制台中打印响应内容。这验证了 CORP 策略确实阻止了不同源读取响应体。
为了验证策略是否生效，可以临时修改服务器配置，将 Cross-Origin-Resource-Policy 头部设置为 cross-origin，或者直接移除该头部。修改后刷新页面重新请求，如果资源能够正常加载，则确认之前的失败是由 CORP 策略导致的。此外，MDN 文档也指出，该策略是 Spectre 等侧信道攻击的有效防御手段，浏览器会在攻击者访问响应体之前将其剥离。
注意 CORP 与 COEP 的配合使用及潜在风险
在配置 CORP 时，需要考虑它与 Cross-Origin-Embedder-Policy (COEP) 的关系。当文档设置了 COEP: require-corp 时，它要求嵌入的子资源必须要么同源，要么带有 CORP 头部。如果文档设置了 COEP 但资源没有 CORP 头部，资源将无法加载。因此，在启用 COEP 时，必须确保所有跨域资源都正确配置了 CORP 头部。
此外，MDN 提示在生产环境中使用 CORP 需要谨慎。Chrome 浏览器曾存在一个已知 Bug，设置 CORP 可能会破坏 PDF 的渲染，导致用户无法阅读 PDF 的后续页面。因此，在部署此类安全策略前，建议在测试环境中充分验证，确保不会影响核心业务功能的正常使用。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。