1

我正在构建一个 React 应用程序，它为我们的内部开发人员（提交、跟踪时间等）从服务中提取不同的统计信息。

我正在使用 fetch 从时间跟踪应用程序 Harvest 中获取 API 数据。根据他们的文档，您可以使用基本的 HTTP 身份验证。当我使用邮递员应用程序时，一切都很好，我可以看到响应很好。最初我使用：

getHarvest(){
    // Set Harvest Headers
   const harvestHeaders = {
     method: 'GET',
     headers: {
       'Authorization': 'Basic xxxxxxxxxxxxxxx=',
       'Content-Type': 'application/json',
       'Accept': 'application/json',
       'Cache-Control': 'no-cache',
     }
   };

   fetch('https://factor1.harvestapp.com/projects/', harvestHeaders)
   .then( response => response.json() )
   .then( projects => {

    // Do some stuff


   } )
  }

这在控制台中给了我一个错误：

Fetch API 无法加载https://myaccount.harvestapp.com/projects/。对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许访问源“ http://localhost:3000 ”。响应的 HTTP 状态代码为 404。如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。

因此，根据该反馈，我将函数更改为如下所示：

getHarvest(){
    // Set Harvest Headers
   const harvestHeaders = {
     method: 'GET',
     mode: 'no-cors',
     headers: {
       'Authorization': 'Basic xxxxxxxxxxxxxxx=',
       'Content-Type': 'application/json',
       'Accept': 'application/json',
       'Cache-Control': 'no-cache',
     }
   };

   fetch('https://factor1.harvestapp.com/projects/', harvestHeaders)
   .then( response => response.json() )
   .then( projects => {

    // do stuff


   } )
  }

但这会导致身份验证错误：

GET https://myaccount.harvestapp.com/projects/ 401 (Unauthorized)

我不确定如何正确获得响应。难道我做错了什么？使用邮递员应用程序对我来说似乎很奇怪，但事实并非如此。想法？谢谢！

4

1 回答 1

3

Harvest API 似乎并不打算与 XHR 或 Fetch from Web 应用程序一起使用。

至少他们的文档没有提到任何关于使用 XHR 或 Fetch 的 API 的内容，这些文档也没有提到任何关于Access-Control-Allow-OriginCORS 的内容。

相反，文档提供了将 API 与curlPostman REST 客户端一起使用的示例。

并在下面的文档中尝试示例，响应没有Access-Control-Allow-Origin.

curl -H 'Content-Type: application/xml' -H 'Accept: application/xml' \
  -u "user@example.com:password" https://example.harvestapp.com/account/who_am_i

因此，答案似乎是：您无法从 Web 应用程序中使用 XHR/Fetch 访问 Harvest API。

它在 Postman 中有效，因为 Postman 不受浏览器强制执行的同源策略的约束，以防止在浏览器中运行的 Web 应用程序发出跨域请求，除非发出请求的站点/端点选择使用 CORS（它似乎 Harvest 没有选择加入）。

于 2017-01-30T16:22:26.427 回答