Javascript 有用途的家伙

Javascript 有用途的家伙,javascript,cors,fetch-api,Javascript,Cors,Fetch Api,(谷歌翻译) 你好 我对fetch的用法有疑问 从我的服务器访问托管在另一台服务器(如CDN)上的映像 这段代码工作正常。如图所示 var img = document.getElementById( obj ); img.src = data-src; // data-src has the url of the image https://serverCDN/image/bar/foo.jpg 但是,在相同的脚本、相同的服务器、相同的映像中,以下代码不起作用。 返回错误“CORS策略已阻止

(谷歌翻译)

你好

我对fetch的用法有疑问

从我的服务器访问托管在另一台服务器(如CDN)上的映像

这段代码工作正常。如图所示

var img = document.getElementById( obj );
img.src = data-src;
// data-src has the url of the image https://serverCDN/image/bar/foo.jpg
但是,在相同的脚本、相同的服务器、相同的映像中,以下代码不起作用。 返回错误“CORS策略已阻止从源“”获取“”的访问:请求的资源上不存在“Access-Control Allow origin”标头。如果不透明响应满足您的需要,请将请求的模式设置为“No CORS”,以获取禁用CORS的资源。”

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

我很困惑

我对使用fetch感兴趣,因为我需要访问CDN服务器发送的响应头

编辑(用于重复标记) 我不理解CORS的概念,但是
这家伙是…为什么,第一段代码有效,而第二段代码无效?

问题是,上的服务器不发送跨源标头。默认情况下,JavaScript
XMLHttpRequest
s(XHR)绑定到同一个域。您可以通过向目标服务器添加跨源HTTP头来更改此行为。
或者更简单的方法:使用jsonp:

您必须允许CORS,这应该在API设置中设置。但我没有权限在上更改任何内容!!我理解的更改应该在远程服务器(我正在访问)上进行,是否正确?我理解CORS问题。但是我特别怀疑的是,第一段代码是否有效?这不也是javascript吗?区别的原因是浏览器不在img src属性上强制执行同源策略,但浏览器在获取请求上强制执行同源策略(除非服务器响应选择通过在响应中包含访问控制允许同源头来放松同源策略).但我没有权限在上更改任何内容!!!我理解的更改应该在远程服务器(我正在访问)上进行,是否正确?JSONP可能是一种选择
fetch ( data-src ), {})
    .then (
        function (res) {
            console.log (res)
        }
    );