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

Question

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

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

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

如果有代码参数，这里是主要组件中设置状态的一些 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();
    }
  }

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

Answer 1

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

访问

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

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

无论如何，鉴于在您的部署中发出请求的客户端 Web 应用运行来自与请求发送到的服务器不同的来源，浏览器将阻止请求，除非服务器响应必要的 CORS headers—Access-Control-Allow-Origin，作为开始。有关解释，请参阅 MDN 文章 HTTP access control (CORS).

也就是说，浏览器会阻止来自 JavaScript 的 cross-origin 请求，除非服务器将请求发送到 opts-in 以允许这些请求，以及 Access-Control-Allow-Origin 等。 , 响应 headers。 Postman 不阻止此类请求的原因是 Postman 不是 Web 上某个特定来源的任意 Web 应用程序运行，而是您有意安装的浏览器插件。所以它不受 cross-origin 浏览器对 Web 应用强制实施的限制。

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

Bad Request (400) When Trying to Authenticate Harvest API in React

reactjs

oauth-2.0

cors

fetch-api

harvest