图片无法显示，报错net::ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep 307求助

这个错误是浏览器跨源嵌入器策略（COEP）与资源跨源配置冲突导致的：当页面启用了严格的COEP规则（比如require-corp），所有嵌入的资源必须是同源资源，或者携带允许跨源嵌入的Cross-Origin-Resource-Policy响应头。而forkify API返回的图片资源不满足这些条件，因此被浏览器拦截。

以下是几种可行的解决/绕过方案：

• 使用同源代理中转图片请求
  搭建一个简单的代理服务器，将页面的图片请求转发到forkify的图片地址，让页面请求的是同源的代理接口，避免跨源限制。比如用Node.js+Express快速实现：

  const express = require('express');
  const axios = require('axios');
  const app = express();
  
  app.get('/proxy-image', async (req, res) => {
    try {
      const imageUrl = req.query.url;
      const imgResponse = await axios.get(imageUrl, { responseType: 'stream' });
      // 转发图片响应头
      res.setHeader('Content-Type', imgResponse.headers['content-type']);
      imgResponse.data.pipe(res);
    } catch (err) {
      res.status(500).send('图片加载失败');
    }
  });
  
  app.listen(3000, () => console.log('代理服务器运行在 http://localhost:3000'));
  

  之后页面中把图片地址替换为代理接口地址，例如：

  <img src="http://localhost:3000/proxy-image?url=https://example.com/forkify-pizza.jpg" />
  

• 调整页面的COEP响应头（仅当你控制页面服务器时）
  如果你的页面服务器可以自定义响应头，将Cross-Origin-Embedder-Policy设置为unsafe-none，这会放宽浏览器的跨源嵌入限制，允许加载未配置CORP头的跨源资源。注意这个设置会降低页面的安全性，适合开发环境或低风险场景。

• 尝试直接访问图片原始源
  检查forkify API返回的图片地址，部分图片可能来自公开可访问的第三方CDN，尝试直接访问该地址是否能正常加载。如果可以，直接使用该地址替代API返回的链接（不过这个方案依赖图片源的跨源配置，稳定性不高）

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