设置Cross-Origin-Resource-Policy后图片还是被阻止了怎么办？

程序员建宇提问于 2026-02-04 19:16:34 阅读 48

安全

我给服务器配置了cross-origin-resource-policy: same-site，但跨域加载图片时还是出现这个错误：Blocked by Cross-Origin Resource Policy: The policy does not allow the frame to load the image.。之前用的是CORS头，现在加了这个策略反而更严格了？

具体场景是图片托管在cdn.example.com，主站是www.example.com。尝试过把COP设为cross-origin和same-origin都试过，但主站加载图片依然报错。服务器是Nginx，配置如下：


server {
    listen 80;
    server_name cdn.example.com;
    add_header Cross-Origin-Resource-Policy same-site;
    add_header Content-Security-Policy "default-src 'none'";
}

奇怪的是，如果去掉cross-origin-resource-policy头反而能正常加载图片。这说明问题出在COP配置上，但官方文档说same-site应该允许同源和跨域子域名访问啊？

安全头配置

我来解答赞 6 收藏

反馈

2 条解答

设计师诗诗 Lv1

问题在于Cross-Origin-Resource-Policy的same-site对子域名不生效，它只允许完全同源的请求。把COP改成cross-origin，同时加个Access-Control-Allow-Origin头指定主站域名。

Nginx配置改成这样：

server {

    listen 80;

    server_name cdn.example.com;

    add_header Cross-Origin-Resource-Policy cross-origin;

    add_header Access-Control-Allow-Origin "https://www.example.com";

}

如果还报错，把Content-Security-Policy那行删了，太严格了没必要。

2026-02-14 21:11

上官恒菽 Lv1

你这个问题我之前也遇到过，COP 的确比 CORS 严格得多，而且它的优先级更高。你用了 Cross-Origin-Resource-Policy: same-site，但浏览器还是拦了，是因为 same-site 并不等于“允许跨子域”，它对 origin 的匹配是完全匹配的，www.example.com 和 cdn.example.com 在浏览器眼里是两个完全不同的 origin。

CORS 是一种“允许白名单”的机制，而 COP 是“默认拒绝”的策略，除非你明确告诉浏览器这个资源可以被谁加载。

### 正确做法是：

如果你想让 www.example.com 加载 cdn.example.com 的图片，那你就不能只靠 Cross-Origin-Resource-Policy，它不能动态控制谁可以加载资源。COP 是服务器对资源的保护策略，不是用来做白名单的。

如果你确实想继续用 COP，那必须配合 Cross-Origin-Embedder-Policy 和 Cross-Origin-Opener-Policy 一起用，而且浏览器端还得做 crossorigin 属性声明，例如：

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

但说实话，这种组合太复杂了，而且兼容性和调试都很麻烦。如果你只是想解决图片跨域加载的问题，**正确的做法是去掉 COP，继续用 CORS**，因为 COP 是为了防止跨站攻击设计的，不是为 CDN 图片准备的。

---

### 给你一份有效的 Nginx 配置（用 CORS）：

server {

    listen 80;

    server_name cdn.example.com;



    location ~ .(jpg|jpeg|png|gif|webp)$ {

        add_header 'Access-Control-Allow-Origin' 'https://www.example.com' always;

        add_header 'Access-Control-Allow-Methods' 'GET' always;

        add_header 'Access-Control-Allow-Headers' 'Origin' always;

        add_header 'Access-Control-Expose-Headers' 'Content-Length' always;



        # 静态资源缓存配置

        expires 30d;

        add_header Cache-Control "public, no-transform";

    }

}

这样配置后，在 www.example.com 页面中就可以正常加载 cdn.example.com 的图片了，不需要额外加 crossorigin 属性也能跑通。

---

### 总结：

- COP 是用来限制资源只能被特定来源访问的，不是为了放行 CDN 资源设计的
- CDN 图片建议继续使用 CORS，而不是 COP
- 如果你坚持要用 COP，那得配合客户端使用 crossorigin，并且浏览器策略会更复杂

代码给你，直接上线没问题。

2026-02-04 20:00