Cross-Origin-Embedder-Policy 设置后图片加载失败怎么办？

令狐维通提问于 2026-03-04 14:22:20 阅读 34

安全

我在 Vue 项目里加了安全头 Cross-Origin-Embedder-Policy: require-corp，结果页面里的跨域图片全挂了，控制台报错说需要 CORS 或者 crossorigin 属性。但这些图片来自第三方 CDN，没法改响应头，有啥办法能绕过吗？

我试过给 img 标签加 crossorigin="anonymous"，但没用，还是被拦截。代码大概是这样：

<template>
  <div>
    <img 
      src="https://example-cdn.com/avatar.jpg" 
      crossorigin="anonymous"
      alt="user avatar"
    />
  </div>
</template>

安全头配置

我来解答赞 9 收藏

反馈

2 条解答

一瑞芳 Lv1

这问题我也遇到过，COEP确实坑。既然CDN那边改不了响应头，那就只能改我们自己这边的策略了。

直接说解决方案：把COEP改成unsafe-none，同时配合COOP一起用。nginx配置大概这样：

add_header Cross-Origin-Embedder-Policy unsafe-none;

add_header Cross-Origin-Opener-Policy same-origin;

或者如果你用express的话：

app.use((req, res, next) => {

  res.setHeader('Cross-Origin-Embedder-Policy', 'unsafe-none');

  res.setHeader('Cross-Origin-Opener-Policy', 'same-origin');

  next();

});

这样配置后你的图片就能正常加载了，安全性也比完全不用这些头要好。记住COEP的require-corp本来就是最严格的模式，除非你能控制所有资源，否则还是别用。

2026-03-06 14:11

UP主～羽沫 Lv1

既然搞不定第三方 CDN 的头，就把 require-corp 改成 Cross-Origin-Embedder-Policy: credentialless，这招对静态图片通常不需要 CORS 头。如果非得保留 require-corp，那只能自己写个 Nginx 或 Vite 代理转发图片，然后在响应里手动塞入 Access-Control-Allow-Origin: *。

2026-03-04 14:57