Question

我使用带有Twitter身份验证的express + passport服务器提供反应应用程序。

现在在快递服务器中，我有以下代码，用于twitter登录：

app.get('/login/twitter', passport.authenticate('twitter'));

在反应应用程序，即App.js，如果我使用以下代码，那么它工作正常，我重定向到Twitter页面进行身份验证，并在身份验证后返回：

 <a href="/login/twitter"> Simple href: Login with Twitter </a>

但是，如果我使用一个提取所请求网址的按钮，而不是简单的一个href =＆＃34; / login / twitter＆＃34; ，那么它会抛出一个CORS错误，例如：

class LoginControl extends React.Component {

constructor(props) {
    super(props);
    this.handleLoginClick = this.handleLoginClick.bind(this);
    this.handleLogoutClick = this.handleLogoutClick.bind(this);
    this.state = {isLoggedIn: false};
  }

  handleLoginClick() {
    var url = "/login/twitter";

    fetch(url, {   crossDomain:true, method: 'GET', redirect: 'follow'})
    .then(response => {
      response.json()
    })
    .then(jsondata => console.log(jsondata))
    .catch(function(err) {
        console.info(err + " url: " + url);
    });
    this.setState({isLoggedIn: true});
  }

  handleLogoutClick() {
    this.setState({isLoggedIn: false});
  }

  render() {
    let button = !!this.state.isLoggedIn ? (<LogoutButton onClick={this.handleLogoutClick} />) : ( <LoginButton onClick={this.handleLoginClick} />);

    return (
      <div>
        {button}
      </div>
    );
  }
}


class App extends Component {
  render() {
    return (
     <div className="App">
     <a href="/login/twitter"> Simple href: Login with Twitter </a>
     <LoginControl />
    );
  }
}
export default App;

所以问题是为什么 a href =＆＃34; / login / twitter＆＃34; 按预期工作，但LoginControl组件会抛出以下错误：

Failed to load https://api.twitter.com/oauth/authenticate?oauth_token=xxxxxxxxxxxxxxxxx: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:3000' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

另外如何修复它并使用存储状态的登录按钮而不是 a href ？

Answer 1

在发出AJAX请求时，您无法在服务器端使用重定向。 href只是一个默认请求，另一方面，通过fetch你可以进行异步调用。

React fetch redirect：CORS错误

1 个答案: