javascript - 用于 stats.nba.com 的 CORS/CORB

Question

有人询问 API，我特别想创建一个使用 NBA API (stats.nba.com) 的示例。无可否认，我不是专家，但我想我会使用 fetch 编写一个示例。

我找到了一些关于 API 端点 (link) 的文档，并且可以组成一个 URI，当直接从地址栏访问时解析为 JSON 数据。

我遇到的问题是，当我使用 fetch 尝试此操作时，API 似乎不允许 CORS，所以我做了一些阅读，据我所知，我应该能够使用 'no-cors 发出不透明的请求'.但是，当我使用“no-cors”参数时，我得到一个 CORB(跨源阻塞)错误，我找不到太多关于该错误的文档，但如果名称是一个指示，那么我认为无法发出跨源请求。

让这个假设变得困惑的部分是，虽然我似乎找不到任何使用 NBA API 客户端的示例，但我可以看到许多库似乎使用了我用 Python 测试过的相同端点和其他服务器端方法。事实上，上面的文档来自一个 git，它就是这样做的。

作为替代方案，我确实尝试了另一个使用 NHL API (statsapi.web.nhl.com) 的示例，它似乎工作正常，我可以生成团队花名册列表。

这是演示该问题的一段简化代码。 “dataURL1”与“cors”一起工作正常，但 dataURL2 在“cors”和“no-cors”上都出错。

function test01() {            
  var dataURL1 = "http://statsapi.web.nhl.com/api/v1/teams/8";
  var dataURL2 = "https://stats.nba.com/stats/commonteamroster/?Season=2017-18&TeamID=1610612737";                                 
  
  /*
  - if dataURL1 is used there is no issue with 'cors' parameter
  - if dataURL2 is used with 'cors' parameter, 
    a no 'Access-Control-Allow-Origin' message is given
  - if dataURL2 is used with 'no-cors' parameter, 
    a CORB message is given
  */      
  fetch(dataURL2, { mode: 'no-cors' })
    .then((resp) => resp.json())
    .then(function (data) {
      console.log("data retrieved");                    
    })
    .catch(function (error) {
      console.log(error);
    });
}

大多数情况下，我需要确认我没有遗漏任何东西，并且我无法通过客户端发出请求。如果是这种情况，我将不胜感激文章或内容的一些指导，这些文章或内容解释了为什么可以在服务器端而不是客户端发出请求。

Answer 1

NHL URL 有效是因为其服务器响应 Access-Control-Allow-Origin: * (加上其他 CORS header )而 NBA 服务器则没有。由于您不控制有问题的服务器，因此您无法更改此行为。您可以让您控制的服务器执行提取，并让您的服务器在浏览器发送请求时以 CORS 友好的方式响应内容。

同源策略是一种机制，浏览器通过该机制防止脚本从请求脚本读取存在于不同源上的资源。如果您使用非浏览器的软件执行 HTTP 请求，则 CORS 将不适用，因为 CORS 是 Web 浏览器固有的安全措施。

no-cors是一种表达方式，“是的，我知道这是一个跨源资源。无论如何都要获取它，但当然不要让我阅读响应。”这是一个“不透明响应”，可以在可以将内容直接呈现给用户(例如，将跨源图像放置在 <img> 标签中)同时保持尝试学习的脚本无法访问内容时使用关于它的内容。

但是，JSON 数据不是这种不透明响应功能有意义的数据。 CORB 是当浏览器决定“此响应无法对请求页面有用时；我担心这样做纯粹是为了利用安全漏洞。因此，我什至不会，例如，解析此 JSON。 "