<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">
8条答案
按热度按时间7qhs6swi1#
这个应该能修好
j2datikz2#
我得到同样的错误,而从不同的API获取图像。
我通过在图像标签中添加
crossorigin="anonymous"
修复了错误。只需在img标签中添加
crossorigin="anonymous"
,例如:这将解决该错误。
nukf8bse3#
您需要设置
cross-origin-resource-policy: "cross-origin"
。如果您在Express应用程序中使用 Helm ,请尝试以下操作:有关详细信息,请阅读CORP和HelmetJS
carvr3hs4#
这是一个CORS问题,只能在服务器端解决。
响应的头标为
cross-origin-resource-policy: same-origin
,它告诉我们该资源只能由同一个源访问(当它在HTML页面中被调用时,使用现代浏览器)您可以将映像托管在其他位置以使用它。
参考:https://developer.mozilla.org/en-US/docs/Web/HTTP/Cross-Origin_Resource_Policy_(CORP)
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阻止的另一个映像可能不会过期,我可以对此进行适当测试,如果此映像不起作用,我可能会找到其他答案。
干杯!
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
plupiseo7#
您可以使用helemt包
qxsslcnc8#
据我所知,Instagram正在阻止任何非Instagram的人显示他们的照片。我不知道你怎么能绕过它...