Question

我正在构建一个React应用程序，它为我们的内部开发人员提交不同的统计数据（提交，跟踪时间等）。

我正在使用fetch来抓取来自Harvest的API数据，这是一款时间跟踪应用。根据{{3}}，您可以使用基本的HTTP身份验证。当我使用应用程序Postman时，一切都很好，我可以看到响应很好。最初我用过：

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无法加载their docs。对预检请求的响应未通过访问控制检查：否请求中存在“Access-Control-Allow-Origin”标头资源。因此不允许来源“https://myaccount.harvestapp.com/projects/” 访问。响应具有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)

我不确定如何才能正确得到答案。难道我做错了什么？对我来说，使用应用程序Postman工作似乎很奇怪，但事实并非如此。思考？谢谢！

Answer 1

似乎Harvest API不适用于XHR或从Web应用程序中获取。

至少their docs没有提及有关在XHR或Fetch中使用其API的任何内容，这些文档也没有提及有关class TypeSection { /** * @ORM\Id * @ORM\Column(type="integer") * @ORM\GeneratedValue(strategy="AUTO") */ protected $id; /** * @ORM\Column(type="string") * */ private $name; /** * @ORM\OneToMany(targetEntity="SectionCase", mappedBy="type") */ private $sections; }和CORS的任何内容。

相反，文档提供了使用带Access-Control-Allow-Origin的API和Postman REST客户端的示例。

在下面的文档中尝试示例时，响应没有curl。

Access-Control-Allow-Origin

所以答案似乎是：您无法通过Web应用程序使用XHR / Fetch访问Harvest API。

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

使用模式时出现身份验证错误：在React

1 个答案: