如何解决ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep报错

• 你当前配置的Cross-Origin-Resource-Policy响应头仅作用于你自己的Express接口返回的内容，而报错拦截的是第三方外部站点返回的电影海报图片资源，COEP校验的是图片资源本身的响应头，和你自己的/movies接口响应头无关，所以你的修改不会生效。
• 如果你的海报是存放在自身服务的public目录下的静态资源，你当前的CORP中间件写在express.static之前逻辑上可覆盖静态资源，可优先排查静态资源的实际响应头是否确实携带了对应的CORP配置。

方案1：服务端代理第三方资源 #

在你的Express服务中新增代理接口，由服务端请求第三方海报图片，再将图片内容加上CORP头返回给前端，示例代码如下：

import axios from 'axios';
// 新增代理路由，放在其他路由之前
app.get('/proxy-poster', async (req, res) => {
  try {
    const imageUrl = decodeURIComponent(req.query.url);
    const response = await axios.get(imageUrl, {
      responseType: 'arraybuffer'
    });
    // 继承第三方返回的内容类型
    res.set('Content-Type', response.headers['content-type']);
    // 添加CORP头
    res.set('Cross-Origin-Resource-Policy', 'cross-origin');
    res.send(response.data);
  } catch (err) {
    res.status(400).send('资源加载失败');
  }
});

前端拿到/movies接口返回的海报地址后，替换为/proxy-poster?url=${encodeURIComponent(原海报地址)}即可。

方案2：调整站点COEP配置 #

如果你的站点不需要严格的跨源隔离，可修改响应头的Cross-Origin-Embedder-Policy配置：

• 若无需COEP限制，直接设置Cross-Origin-Embedder-Policy: unsafe-none
• 若需要保留跨源隔离能力，可设置为Cross-Origin-Embedder-Policy: credentialless，该配置允许加载无CORP头的跨源匿名资源

方案3：开发环境临时关闭COEP #

如果仅在React本地开发环境出现该问题，是因为React18+的开发服务器默认开启了COEP，可修改React项目的配置文件关闭该特性，生产环境再根据实际需求调整。

你当前的错误处理中间件参数顺序错误，Express的错误处理中间件要求参数顺序为(err, req, res, next)，你写的(req, res, err, next)会导致错误捕获逻辑失效，建议调整顺序。

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