ERR_BLOCKED_BY_RESPONSE.NotSameOrigin CORS 策略 JavaScript

Question

这是我从 api 获取的图像 URL

https://scontent-jnb1-1.cdninstagram.com/v/t51.2885-15/e15/242204298_1728375270686500_5634415857798350440_n.jpg?_nc_ht=scontent-jnb1-1.cdninstagram.com&_nc_cat=104&_nc_oh c=3O8LpuGJsdUAX_E1Dxz&edm=AHlfZHwBAAAA&ccb=7-4&oh= 0a22779e81f47ddb84155f98f6f5f75f&oe=6148F26D&_nc_sid=21929d

这是我的 HTML

<img src="https://scontent-jnb1-1.cdninstagram.com/v/t51.2885-15/e15/242204298_1728375270686500_5634415857798350440_n.jpg?_nc_ht=scontent-jnb1-1.cdninstagram.com&_nc_cat=104&_nc_ohc=3O8LpuGJsdUAX_E1Dxz&edm=AHlfZHwBAAAA&ccb=7-4&oh=0a22779e81f47ddb84155f98f6f5f75f&oe=6148F26D&_nc_sid=21929d">

当我直接通过浏览器访问 URL 时，我会看到图像。但它没有出现在我的网站上

当我检查调试控制台时，我收到此错误。

Failed to load resource: net::ERR_BLOCKED_BY_RESPONSE.NotSameOrigin

当我用 google 搜索这个问题时，问题可能是由于某些 CORS 政策问题造成的。

如何在我的网站上加载此图像而不弄乱政策和其他内容......？

<img src="https://scontent-jnb1-1.cdninstagram.com/v/t51.2885-15/e15/242204298_1728375270686500_5634415857798350440_n.jpg?_nc_ht=scontent-jnb1-1.cdninstagram.com&_nc_cat=104&_nc_ohc=3O8LpuGJsdUAX_E1Dxz&edm=AHlfZHwBAAAA&ccb=7-4&oh=0a22779e81f47ddb84155f98f6f5f75f&oe=6148F26D&_nc_sid=21929d">

Answer 1

这应该可以解决它

helmet({
      crossOriginResourcePolicy: false,
    })

Answer 2

从不同的 api 获取图像时，我遇到了同样的错误。

crossorigin="anonymous"我通过添加图像标签修复了错误。

只需添加crossorigin="anonymous"您的 img 标签，例如：

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

这应该可以解决该错误。

Answer 3

你需要设置cross-origin-resource-policy: "cross-origin". 如果您在 Express 应用程序中使用头盔。尝试这个：

app.use(helmet.crossOriginResourcePolicy({ policy: "cross-origin" }));

欲了解更多信息，请阅读这些CORP和HelmetJS

Answer 4

这是一个 CORS 问题，只能在服务器端解决。

响应的标头cross-origin-resource-policy: same-origin告诉我们该资源只能由同源访问（当使用现代浏览器在 html 页面内调用时）

您可以将图像托管在另一个地方来使用它。

参考：https://developer.mozilla.org/en-US/docs/Web/HTTP/Cross-Origin_Resource_Policy_(CORP)