如何使用 Fetch API 跨域加载 Javascript 中的文本或 JSON 数据？答案

【问题标题】：How to use the Fetch API cross-origin to load text or JSON data in Javascript?如何使用 Fetch API 跨域加载 Javascript 中的文本或 JSON 数据？
【发布时间】：2018-02-03 10:16:45
【问题描述】：

首先，我在 Javascript 中使用了这个（可能是旧的）代码：

function GetJson(url)
{
    // 1. New Object XMLHttpRequest
    var xhr = new XMLHttpRequest();

    // 2. Config it 
    xhr.open('GET', url, false);

    // 3. Send request
    xhr.send();

    // 4. Errors 
    if (xhr.status != 200) {
        // Responce error out
        return( xhr.status + ': ' + xhr.statusText ); // 404: Not Found
    } else {
        // Responce result
        return( xhr.responseText ); // responseText -- 
    }
}

这段代码解决了这个问题。直到这个 URL 出现：

https://bittrex.com/api/v1.1/public/getmarketsummaries/

我遇到的第一个错误是：

XMLHttpRequest 无法加载 https://bittrex.com/api/v1.1/public/getmarketsummaries/。不请求中存在“Access-Control-Allow-Origin”标头资源。 Origin 'file: //' 因此不允许访问。

为了不改变浏览器中的任何内容，长时间的搜索使我找到了fetch() 函数。但我断然无法理解如何以 JSON 的形式或至少以文本的形式从服务器获取响应（用于进一步转换为 JSON）

我试试这个：

fetch('https://bittrex.com/api/v1.1/public/getmarketsummaries/',{mode:'no-cors'})  
  .then(  
    function(response) {  
      if (response.status !== 200) {  
        console.log('Looks like there was a problem. Status Code: ' +  
          response.status);  
        return;  
      }

      // Examine the text in the response  
      response.json().then(function(data) {  
        console.log(data);  
      });  
    }  
  )  
  .catch(function(err) {  
    console.log('Fetch Error :-S', err);  
  });

我得到了答案：

看起来有问题。状态码：0

有没有办法获取数据？在变量中是可取的。因为我只是不明白 fetch 是如何工作的。

我只需要从 API 获取数据以进行进一步处理。

【问题讨论】：

尝试将模式更改为 mode: 'cors'，因为如果模式为 'no-cors'，JavaScript 可能无法访问结果响应的任何属性
如果 "cors" ，则请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，Origin 'file://' 不允许访问。如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。
如果您从中删除 mode:'no-cors' 并在 fetch 调用中的请求 URL 前加上 https://cors-anywhere.herokuapp.com/ 前缀，您的调用将起作用，如下所示：fetch('https://cors-anywhere.herokuapp.com/' + 'https://bittrex.com/api/v1.1/public/getmarketsummaries/')。有关其工作原理的说明，请参阅stackoverflow.com/questions/43871637/… 答案的如何使用 CORS 代理解决“No Access-Control-Allow-Origin 标头”问题部分

标签： javascript json cors javascript-objects fetch-api

【解决方案1】：

你仍然有 cors 的问题。 “no-cors”模式无法按预期工作。

【讨论】：

唯一的解决办法是在浏览器中禁用安全性？没有其他解决方案吗？
这不是可以禁用的安全功能。唯一的解决方案是联系域管理员并请求他们允许跨域访问您要从中加载数据的 URL。

【解决方案2】：

您正在处理的是跨域资源共享 (CORS)。您从中请求数据的 URL 不允许从另一个域获取数据。您的第二个 sn-p 工作的原因是因为您将模式设置为 no-cors。调用将成功，但您的代码将无法访问任何数据。这对你的目的有点没用。

【讨论】：