前端跨源资源的隔离问题net::ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep

理解

当启用 Cross-Origin-Embedder-Policy: require-corp 时，浏览器要求所有嵌入页面的资源（如脚本、样式、图片、iframe 等）必须明确允许被跨源加载。若某个资源未正确配置跨源头（如 Cross-Origin-Resource-Policy 或 CORS），即使它看似同源，也可能被阻止。

检查被阻止的资源

解决方法

前端 crossorigin="anonymous"

只需添加crossorigin="anonymous"您的 img 标签即可

<img crossorigin="anonymous" src="https://example.com/image.jpg">

后端配置响应头

对于所有跨源资源，确保它们的响应头包含以下至少一种配置

使用 CORS

添加 Access-Control-Allow-Origin 头，允许请求来源

Access-Control-Allow-Origin: https://your-website.com  # 或 *（不推荐）
Access-Control-Allow-Credentials: true  # 如果需要凭据（如 Cookie）

使用 CORP

添加 Cross-Origin-Resource-Policy 头，允许资源被嵌入

Cross-Origin-Resource-Policy: same-site  # 允许同站请求
或
Cross-Origin-Resource-Policy: same-origin  # 仅允许同源请求

对于同源资源

如果资源实际是同源的，但被错误地识别为跨源，检查 URL 是否严格一致（协议、域名、端口）。