Question

所以我在办公室里为开发人员建立一个内部使用的状态板。它将显示提交的数量，跟踪的小时数等。

我正在关注此model进行身份验证。在用户使用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组件中的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在实践中的唯一目的是与服务工作者结合使用，而无需获取响应的属性。

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

也就是说，浏览器阻止来自JavaScript的跨源请求，除非将请求发送到opts-in的服务器允许那些具有Access-Control-Allow-Origin等响应头的请求。 Postman没有阻止此类请求的原因是Postman不是在Web上某个特定来源运行的任意Web应用程序，而是您有意安装的浏览器插件。因此，它并不限制浏览器强制实施Web应用程序的跨源限制。

错误请求（400）尝试在React中验证Harvest API时

1 个答案: