javascript - NodeJS : Not able to access an image using ajax GET method. 但相同的 URL 在浏览器中加载图像没有任何问题

Question

当我尝试使用 ajax GET 方法访问 Azure 存储中的图像时，出现以下错误

Failed to load https://server/blobContainer/5a7389786136171dc06247cd: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3030' is therefore not allowed access.

但是，如果我在浏览器中输入 URL https://server/blobContainer/5a7389786136171dc06247cd，则图像会毫无问题地加载到浏览器中。我在请求 header 中没有看到“Origin”。仅在 Ajax 调用中我才能在请求 header 中看到“Orgin”。

请帮助我使用ajax GET方法访问图像

提前致谢!

Answer 1

Ajax 调用受 Cross Origin Restrictions 约束(通常缩写为 CORS)，这意味着默认情况下您不能对与加载网页的来源不同的来源进行 Ajax 调用。源由其协议(protocol)、主机和端口定义。

<img>标签没有 CORS 限制。

要允许 CORS 请求，您尝试发出 CORS 请求的服务器需要明确允许它。您无法纯粹从客户端解决此问题。服务器通过包含某些与 CORS 相关的 header ，甚至可能(在某些情况下)通过支持某些类型的 CORS 请求所需的特殊 OPTIONS 请求来允许 CORS 请求。

您看到的错误消息:No 'Access-Control-Allow-Origin' header is present on the requested resource.浏览器是否告诉您目标主机没有明确允许您发出 CORS 请求，因此浏览器正在阻止您的 ajax 调用。

Please help me to access the image using ajax GET method

目标服务器必须将适当的 CORS header 添加到响应中，然后浏览器才会允许您联系它。您可以阅读更多有关 CORS 的信息 here on MDN .

解决 CORS 限制的另一种方法是使用支持 CORS 的代理服务器。您向代理发出请求并告诉它您希望它为您获取什么 URL。然后，代理服务器(不受 CORS 限制，因为这只是浏览器限制)代表您获取所需的资源，然后将其从代理返回，作为对代理的原始请求的响应。

使用 Ajax 调用加载图像听起来有点不寻常。您可以使用 <img> 加载图像标签，或者您可以在浏览器 Javascript 中使用 new Image() 创建图像对象然后你可以将图像加载到其中。这些都不受 CORS 限制。