Question

（由Google翻译）

你好

我对获取功能的使用有疑问

我从服务器访问托管在另一台服务器（例如CDN）上的图像

这段代码正常工作。显示了图像。

var img = document.getElementById( obj );
img.src = data-src;
// data-src has the url of the image https://serverCDN/image/bar/foo.jpg

但是，在相同脚本，相同服务器，所涉及的相同映像中，以下代码不起作用。返回错误“从原点'https://serverCDN/image/bar/foo.jpg到'http://myServer'的提取访问已被CORS策略阻止：请求中不存在'Access -Control-Allow-Origin'标头如果不透明的响应满足您的需求，请将请求的模式设置为“ no-cors”，以在禁用CORS的情况下获取资源。“

fetch ( data-src ), {})
    .then (
        function (res) {
            console.log (res)
        }
    );

因为第一段代码有效而第二段代码无效？

我很困惑。

我会对使用提取感兴趣，因为我需要访问CDN服务器发送的RESPONSE HEADERS

编辑（针对重复标记） 我不理解CORS的概念，但是花花公子是...为什么，第一段代码有效而第二段代码无效？

Answer 1

问题在于，https://servercdn/image/bar/foo.jpg上的服务器未发送跨源标头。默认情况下，JavaScript XMLHttpRequest（XHR）绑定到同一域。您可以通过将跨源HTTP标头添加到目标服务器来更改此行为。或更简单的方法：使用jsonp：https://www.w3schools.com/js/js_json_jsonp.asp

具有提取功能的Dude

1 个答案: