0

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

我正在遵循此模型进行身份验证。在用户使用 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();
    }
  }

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

4

1 回答 1

0

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

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

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

无论如何，鉴于在您的部署中发出请求的客户端 Web 应用程序从与请求发送到的服务器不同的来源运行，浏览器将阻止请求，除非服务器使用必要的 CORS 标头进行响应——<code>Access -Control-Allow-Origin，首先。有关说明，请参阅 MDN 文章HTTP 访问控制 (CORS)。

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

于 2017-02-06T17:30:36.357 回答