javascript - 谷歌 OAuth : No 'Access-Control-Allow-Origin' header is present on the requested resource when trying to make get request

Question

所以我正在尝试使用 Passport google oauth20 启用 google 身份验证。我创建了一个按钮，可以像这样将表单提交到后端。

<form className="auth-form" action ="/api/v1.0/authentication/google" method="get">
  <button type="submit" className="btn btn-light" >
    <img width="20px" style={{ marginBottom: "3px", marginRight: "1em" }} alt="Google sign-in" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/512px-Google_%22G%22_Logo.svg.png" />
    Sign up with Google
  </button>
</form>

但这不允许我捕获 get 请求的响应。因此，我尝试制作一个 onClick 函数，该函数调用一个函数，该函数向与此相同的 URL 发出 axios.get() 请求

<div className="auth-form">
  <button className="btn btn-light" onClick={this.googleAuthenticate}>
    <img width="20px" style={{ marginBottom: "3px", marginRight: "1em" }} alt="Google sign-in" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/512px-Google_%22G%22_Logo.svg.png" />
    Sign up with Google
  </button>
</div>

这是在我的类组件中

class Register extends Component {
  constructor(props) {
    super(props);
    this.googleAuthenticate = this.googleAuthenticate.bind(this);
  }

  googleAuthenticate(){
    axios.get("/api/v1.0/authentication/google")
    .then(({data})=>{
      console.log("this is data",data);
    });
  }
}

但这不会将我重定向到谷歌签名页面。请给我一些建议，告诉我该怎么做。单击按钮时出现的错误是

在“https://accounts.google.com/o/oauth2/v2/auth? response_type=code&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Fapi%2Fv1.0%2Fgoogle%2Fcallback&scope=profile%20email&client_id=976971922840-p9eobg6v863nppicf7vsatfup1q82qjt.apps.googleusercontent.com'(重定向自'http000/localhost api/v1.0/authentication/google') 来自 'http://localhost:3000' 已被 CORS 策略阻止:请求的资源上不存在 'Access-Control-Allow-Origin' header 。

服务器端代码是

router.get("/api/v1.0/authentication/google", restrict({ unregistered: 
true, registered: false }), passport.authenticate("google", { scope: 
["profile", "email"] }));

router.get("/api/v1.0/google/callback", restrict({ unregistered: true, registered: false }), passport.authenticate("google", { failureRedirect: "/register" }), (req, res,next) => {
    res.redirect("/");
});

Answer 1

我找到了一个解决方案:

[Passportjs][Angular5] No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access

<a href="http://localhost:3000/login/google">Google</a>

“localhost:3000/login/google”转到 app.get('/login/google', passport.authenticate('google', { scope: ['profile','email']}) ); 的地方