因此，我正在为办公室中的开发人员建立一个状态板供内部使用。它将显示提交次数，跟踪的小时数等。
我正在遵循此模型进行身份验证。用户以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组件中的访存函数：
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();
}
}
我在这里做错什么了吗？为什么总是返回错误请求？任何帮助，将不胜感激。谢谢！
至少有一个问题是，当您使用mode: 'no-cors'浏览器时，它告诉浏览器将响应作为不透明的响应来处理，这意味着您在告诉浏览器不要使响应对象的任何属性都可以从JavaScript访问。
因此，如果您提出mode: 'no-cors'请求，response => response.json()将会失败。
no-cors在实践中，唯一的目的是与Service Worker结合使用，当您只是从响应中缓存资源（例如图像）时，无需获取响应的属性。
无论如何，考虑到客户端Web应用程序使您的部署请求是从不同的起源比服务器的请求被发送到，浏览器会阻止必要的CORS包头中，除非服务器响应请求运行Access-Control-Allow-Origin，一开始。有关说明，请参见MDN文章HTTP访问控制（CORS）。
也就是说，浏览器会阻止由JavaScript发出的跨域请求，除非将请求发送到服务器的服务器选择加入以允许使用Access-Control-Allow-Origin响应标头等。Postman不会阻止此类请求的原因是，Postman不是在Web上某个特定来源运行的任意Web应用程序，而是您有意安装的浏览器插件。因此，它不受浏览器对Web应用程序实施的跨域限制的约束。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句