使用 fetch 的老兄[重复]答案

【问题标题】：Dude with fetch use [duplicate]使用 fetch 的老兄[重复]
【发布时间】：2019-03-04 04:01:04
【问题描述】：

（由谷歌翻译）

你好

我对 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

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

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

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

我很困惑。

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

编辑（重复标签） 我不了解 CORS 的概念，但是老兄是……为什么，第一段代码有效，第二段无效？

【问题讨论】：

您必须允许 CORS 这应该在您的 API 设置中进行设置。 itnext.io/cors-understanding-it-practically-9c401ed818cd
但我无权更改serverCDN 的任何内容！我理解的更改应该在（我正在访问的）远程服务器上进行是否正确？
我了解 CORS 问题。但是......我的具体疑问是因为第一块代码它可以工作吗？那不也是javascript吗？
差异的原因是浏览器不会对 img src 属性强制执行同源策略，但浏览器确实对 fetch 请求强制执行同源策略（除非服务器响应选择加入通过在响应中包含 Access-Control-Allow-Origin 标头来放宽同源策略）。

标签： javascript cors fetch-api

【解决方案1】：

问题是，https://servercdn/image/bar/foo.jpg 上的服务器不发送 Cross Origin 标头。默认情况下，JavaScript XMLHttpRequests (XHR) 绑定到同一个域。您可以通过将跨源 HTTP 标头添加到目标服务器来更改此行为。或者更简单的方式：使用jsonp：https://www.w3schools.com/js/js_json_jsonp.asp

【讨论】：

但我无法在serverCDN 更改任何内容！！！我理解的更改应该在远程服务器（我正在访问的服务器）上进行是否正确？ JSONP 可能是一种选择