错误阻塞响应,非同一来源CORS策略JavaScript

pcww981p  于 2023-01-19  发布在  Java
关注(0)|答案(8)|浏览(161)

这是我从一个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">

当我直接通过浏览器转到网址时,我看到了图像。但它没有显示在我的网站上
当我检查调试控制台时,我收到此错误。

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">
7qhs6swi

7qhs6swi1#

这个应该能修好

helmet({
      crossOriginResourcePolicy: false,
    })
j2datikz

j2datikz2#

我得到同样的错误,而从不同的API获取图像。
我通过在图像标签中添加crossorigin="anonymous"修复了错误。
只需在img标签中添加crossorigin="anonymous",例如:

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

这将解决该错误。

nukf8bse

nukf8bse3#

您需要设置cross-origin-resource-policy: "cross-origin"。如果您在Express应用程序中使用 Helm ,请尝试以下操作:

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

有关详细信息,请阅读CORPHelmetJS

carvr3hs

carvr3hs4#

这是一个CORS问题,只能在服务器端解决。
响应的头标为cross-origin-resource-policy: same-origin,它告诉我们该资源只能由同一个源访问(当它在HTML页面中被调用时,使用现代浏览器)
您可以将映像托管在其他位置以使用它。
参考:https://developer.mozilla.org/en-US/docs/Web/HTTP/Cross-Origin_Resource_Policy_(CORP)

j2qf4p5b

j2qf4p5b5#

有一个很好的代理可以用于此目的-绕过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阻止的另一个映像可能不会过期,我可以对此进行适当测试,如果此映像不起作用,我可能会找到其他答案。
干杯!

cqoc49vn

cqoc49vn6#

这种方式可以修复ERR_BLOCKED_BY_RESPONSE。(通过https://stackoverflow.com/a/71878799/12117869
这个应该能修好
Helm ({跨源资源策略:false,})此
顺便说一句,如果发生ERR_BLOCKED_BY_RESPONSE问题,可能的原因是:这是一个chrome bug。它会发生在chrome 80 - 85版本上。但是它在86版本上被修复了。
[CORS]正确设置飞行前请求模式
到目前为止,CORS飞行前请求模式被设置为kNoCors,并且具有跨原点嵌入器策略:require-corp CORS预检失败,除非附加CORP标题。修复此错误。
相同问题:www.example.comhttps://bugs.chromium.org/p/chromium/issues/detail?id=1116990#c21
谷歌修复提交:https://chromium.googlesource.com/chromium/src.git/+/ed257e2b7df1d3bdcd95d8687bcbd786bc48e717

plupiseo

plupiseo7#

您可以使用helemt包

const helmet = require("helmet");

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

qxsslcnc8#

据我所知,Instagram正在阻止任何非Instagram的人显示他们的照片。我不知道你怎么能绕过它...

相关问题