create-react-app中的Google Calendar API gap.client.init抛出错误

Question

我正在尝试调整谷歌日历浏览器quickstart中的代码，以便在我的React应用程序中工作。每当我尝试运行gap.client.init方法时，它都会抛出以下错误：

Refused to display 'https://developers.google.com/static/proxy?usegapi=1&jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.en_US.MDhkA3012xc.O%2Fam%3DQQ%2Frt%3Dj%2Fd%3D1%2Frs%3DAGLTcCM6WmePnR12kdbRAwKb1aCuIQXH1Q%2Fm%3D__features__#parent=http%3A%2F%2Flocalhost%3A3000&rpctoken=1847815717' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

我把我所有的代码都放在下面了。我确保把我的出身列入白名单。我不知道是不是除了http://localhost:3000

import React, { Component } from 'react';
import config from '../../config';
class Index extends Component {
componentDidMount() {
window.gapi.load('client:auth2', function() {
window.gapi.client.init({
apiKey: config.apiKey,
discoveryDocs: config.discoveryDocs,
clientId: config.clientId,
scope: config.scope
});
});
}
login() {
console.log('logging in...');
window.gapi.auth2.getAuthInstance().signIn();
}
render() {
return (
<div>
<button type="button" onClick={this.login.bind(this)}>Login with Google</button>
</div>
)
}
}
export default Index;

Answer 1

我意识到我的问题是我没有在gap.client.init((方法中包含回调函数。当我添加了一个空的回调函数时，身份验证工作得很好。

window.gapi.client.init({
apiKey: config.apiKey,
discoveryDocs: config.discoveryDocs,
clientId: config.clientId,
scope: config.scope
}).then(function(){ //Put anything here; it can be empty });