在React中尝试对Harvest API进行身份验证时出现错误请求（400）

Question

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

我正在遵循此模型进行身份验证。 用户通过Harvest登录后，会将他们重定向到应用程序，并使用代码param作为查询字符串，然后我将该查询字符串传递给一个状态，然后进行提取以获取访问令牌（这样我稍后可以提取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组件中的访存函数：

  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'您告诉浏览器将响应作为不透明的响应来处理，这意味着您正在告诉浏览器不要对响应进行任何属性可从JavaScript访问的对象。

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

在实践中， no-cors操作的唯一目的是与Service no-cors结合使用，当您仅从响应中缓存资源（例如图像）时，无需获取响应的属性。

无论如何，假设在您的部署中发出请求的客户端Web应用程序是从与请求发送到的服务器不同的来源运行的，除非服务器使用必要的CORS标头做出响应，否则浏览器将阻止请求-Access Access-Control-Allow-Origin 。 有关说明，请参见MDN文章HTTP访问控制（CORS） 。

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