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_ohc=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

当我用谷歌搜索这个问题时，问题可能是由于某些 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"

修复了错误。

只需在您的 img 标签中添加

crossorigin="anonymous"

，例如：

<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)

Answer 5

有一个很棒的代理专门用于此目的 - 绕过 CORS 块。源代码在这里：https://github.com/Rob--W/cors-anywhere，你可以像这样使用它：

https://cors-anywhere.herokuapp.com/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 之前添加 CORS-Anywhere URL。

如果您受到该网站的速率限制，请尝试

https://circumvent-cors.herokuapp.com/

，这是我从 GitHub 源代码部署的一个，没有任何修改，我认为它不会限制您的速率。

您提供的图像已过期，因此，如果您给我一个示例，说明您使用什么 API 来获取该图像，或者另一个被 CORS 阻止但可能不会过期的图像，我可以正确测试它，也许可以找到另一个回答，如果这个不起作用。

干杯！

Answer 6

这种方式可以修复ERR_BLOCKED_BY_RESPONSE。 （通过https://stackoverflow.com/a/71878799/12117869）

这应该可以解决问题

头盔({ 跨源资源策略：假， }) 这个

顺便说一句，如果发生 ERR_BLOCKED_BY_RESPONSE 问题，可能的原因是： 这是一个镀铬错误。它会发生在 chrome 80 - 85 版本上。但在86版本上已修复。

[CORS] 正确设置预检请求模式

到目前为止，CORS 预检请求模式设置为 kNoCors，并且 cross-origin-embedder-policy: require-corp CORS 预检失败，除非 附加了 CORP 标头。修复错误。

同样的问题： https://bugs.chromium.org/p/chromium/issues/detail?id=1116990#c21

谷歌修复提交：https://chromium.googlesource.com/chromium/src.git/+/ed257e2b7df1d3bdcd95d8687bcbd786bc48e717

Answer 7

您可以使用 helemt 包

const helmet = require("helmet");

app.use(
  helmet({
    crossOriginResourcePolicy: false,
  })
);

Answer 8

只需在您的标签中添加 crossorigin="anonymous" 即可：

<video id="myVideo" crossorigin="anonymous" src="https://xxxxxx....."></video>

Answer 9

像这样使用头盔配置您的 BE 应用程序！这对我有用。

app.use(helmet.crossOriginResourcePolicy({ policy: "跨域" }));