时间戳

首页 > 解决方案 > ERR_BLOCKED_BY_RESPONSE.NotSameOrigin CORS 策略 JavaScript

javascript - ERR_BLOCKED_BY_RESPONSE.NotSameOrigin CORS 策略 JavaScript

问题描述

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

标签： javascripthtmlcross-browsercross-domaininstagram

解决方案

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

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

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

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

推荐阅读