您已在客户端中启用 COEP:
Cross-Origin-Embedder-Policy: require-corp
这是一项出色的安全功能,意味着:
COEP:此网站上的所有内容(数据、图像等)都是我的,或者我使用 CORS 从其他网站获取。 (还可以有第三种方式,即通过cookie、http-auth等对数据进行授权...这不在我们的讨论范围内,所以不要在这里打扰。)
所以,你有两个选择。第一个是禁用 COEP,但我认为您不想这样做。所以,另一个选择是使用CORS对于一切外在的事物。例如,当您获取某些内容时,请使用:
fetch('https://externalwebsite.com/image.jpg',{mode:'cors'})
或者,要将外部图像嵌入 HTML,请使用跨域
<img crossorigin="anonymous" src="https://externalwebsite.com/image.jpg">
Note that crossorigin
属性在<img>
意味着 CORS。如果缺少,则表示“no-cors”,这是默认值。但请注意:当你使用 JavaScript 时fetch
,默认为{mode:'cors'}
,即相反!
现在,如果您尝试这样做(应该使用 CORS),浏览器将抛出另一个错误:
Access [...] has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
这意味着……正是如此!外部服务器必须发送标头:
Access-Control-Allow-Origin: *
该设置意味着每个网站都可以使用服务器的资源(在您的情况下为 API),只要它不在请求中使用/发送/接收 cookie(因为......安全)。在 Express 服务器中实现此功能的方法是设置:
res.header('Access-Control-Allow-Origin', '*');
每个打算向其他网站提供服务的服务器都必须具有此 ACAO 标头。 (如果您只想让其他网站访问您的 API,则可以放置其他网站而不是“*”。)
注/摘要:
如果外部服务器具有此 ACAO 标头,您可以使用 CORS/crossorigin 获取内容。如果它没有 ACAO 标头,您可以使用 no-cors / without crossorigin 来获取内容。但是在您的网站中启用 COEP 后,您只能使用 CORS/crossorigin 进行获取,因此外部服务器必须具有 ACAO。
Now,
至于Cross-Origin-Resource-Policy
您的服务器有,请记住(https://developer.mozilla.org/en-US/docs/Web/HTTP/Cross-Origin_Resource_Policy_(CORP)):
- 该政策仅适用于no-cors要求
- 在跨域资源策略检查期间,如果设置了标头,浏览器将拒绝无行为从不同来源/站点发出的请求。
这意味着,由于您只向该服务器发出 CORS 请求,因此此标头不会执行任何操作(在您的情况下)。因此,出于安全原因,服务器可以将其设置为“同一站点”/“同一来源”,这超出了本主题。