2

我有人问过 API，特别想创建一个使用 NBA API (stats.nba.com) 的示例。诚然，我不是专家，但我想我会用 fetch 做一个例子。

我在 API 端点（链接）上找到了一些文档，并且可以编写一个 URI，当直接从地址栏访问时，该 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);
    });
}

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

4

2 回答 2

3

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

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

no-cors是一种说法，“是的，我知道这是一个跨域资源。无论如何都要获取它，但当然不要让我阅读响应。” 这是一种“不透明的响应”，可以在可以直接向用户呈现内容（例如，放置在标签中的跨域图像<img>）同时保持内容对试图了解其内容的脚本无法访问时使用.

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

于 2018-07-10T19:02:20.620 回答
0

如果您查看从http://statsapi.web.nhl.com/api/v1/teams/8返回的标头，您将看到 Access-Control-Allow-Origin

此标头允许来自与 nhl.com 不同域的浏览器向 api 发出请求。

如果您查看来自https://stats.nba.com/stats/commonteamroster/?Season=2017-18&TeamID=1610612737的标头，您将看不到 Access-Control-Allow-Origin 标头。

nba.com 服务未设置为从浏览器调用跨域。

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#Access-Control-Allow-Origin

于 2018-07-10T19:01:53.817 回答