尝试在 React 中验证 Harvest API 时出现错误请求 (400)

Question

因此，我正在构建一个状态板，供我们作为办公室的开发人员在内部使用。它将显示提交的数量、跟踪的小时数等。

我正在关注此model 进行身份验证。在用户使用 Harvest 登录后，它会将代码参数作为查询字符串重定向回应用程序，然后我将获取该查询字符串并将其传递给一个状态，然后进行获取以获取访问令牌（这样我以后可以提取 API 数据）。

发生的情况是登录成功，但是当您被重定向回应用程序时，提取会引发错误请求 (400) 错误。我已经在 Postman 中进行了测试，并且可以得到正确的响应，所以我不确定问题是什么......

这是 Main 组件中的一些 JS，如果有代码参数，则设置状态：

harvestState() {

// grab URL params
let urlParams = queryString.parse(location.search);
console.log(urlParams);
console.log(urlParams.code);

// set the state based on the paramater passed back
urlParams.code ? (
  this.setState({
    harvestcode: urlParams.code
  })
) : (
  this.setState({
    harvestcode: 'none'
  })
);
}

componentWillMount(){
  this.harvestState();
}

这是我的 Harvest 组件中的 fetch 函数：

  getHarvest(){
    const clientSecret = 'XXXXXXXXXX';
    // Set Harvest Headers
   const harvestHeaders = {
     headers: {
       'Content-Type': 'application/x-www-form-urlencoded',
     },
    method: 'POST',
    mode: 'no-cors',
    body: {
      'code': this.props.code,
      'client_id': this.props.clientid,
      'client_secret': clientSecret,
      'redirect_uri': 'http://dash.mycompany.me',
      'grant_type': 'authorization_code'
    }
   };

   fetch('https://mycompany.harvestapp.com/oauth2/token', harvestHeaders)
   .then( response => response.json() )
   .then( token => {

     console.log(token);

   } )
  }

  componentDidMount(){
    if( this.props.code !== 'none' ){
      this.getHarvest();
    }
  }

这里有什么我做错了吗？为什么它总是返回一个错误的请求？任何帮助，将不胜感激。谢谢！

Answer 1

您遇到的至少一个问题是，当您使用mode: 'no-cors' 时，您是在告诉浏览器将响应作为opaque response 处理，这意味着您是在告诉浏览器不要对响应进行任何属性处理可从 JavaScript 访问的对象。

因此，如果您发出 mode: 'no-cors' 请求，response => response.json() 将会失败。

no-cors 在实践中的唯一用途是与 Service Worker 结合使用，因为您只是从响应中缓存资源（例如图像），而无需获取响应的属性。

无论如何，鉴于在您的部署中发出请求的客户端 Web 应用程序从与请求发送到的服务器不同的源运行，浏览器将阻止请求，除非服务器使用必要的 CORS 标头进行响应—@ 987654327@，首先。有关解释，请参阅 MDN 文章HTTP access control (CORS)。

也就是说，浏览器会阻止由 JavaScript 发出的跨域请求，除非将请求发送到的服务器选择允许那些带有 Access-Control-Allow-Origin 等的响应标头。 Postman 不阻止此类请求的原因是 Postman 不是在 Web 上某个特定来源运行的任意 Web 应用程序，而是您有意安装的浏览器插件。因此，它不受浏览器对 Web 应用程序强制执行的跨域限制的约束。