将 fetch 与 Passport 结合使用会得到“请求的资源上不存在

Question

我想在我的网站上放置一个按钮，让用户授权访问他的 YouTube 帐户。我正在使用 Passport 进行身份验证。我的代码使用 fetch 来发送请求。当我点击按钮时，我得到：访问“https://accounts.google.com/o/oauth2/auth?access_type=offline&approval_prompt=force&response_type=code&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Fgooglecb&scope=https%3A%2F%2Fwww.googleapis .com%2Fauth%2Fyoutube&client_id=...'（从'http://localhost:3000/google'重定向）来自'http://localhost:3000'已被CORS策略阻止：对预检请求的响应不'未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以在禁用 CORS 的情况下获取资源。如果我对 /google 使用 href，它就可以工作。应用程序.js：const appConfig = require('./config.js');const cors = require('cors')const express = require('express');const passport = require('passport');const path = require('path');const YoutubeV3Strategy = require('passport-youtube-v3').Strategy;const index = require('./routes/index');const app = express();app.set('views', path.join(__dirname, 'views'));app.set('view engine', 'ejs');app.use(cors());app.use(passport.initialize());app.use(passport.session());passport.use(new YoutubeV3Strategy({  clientID: appConfig.youtube.id,  clientSecret: appConfig.youtube.secret,  callbackURL: 'http://localhost:3000/googlecb',  scope: ['https://www.googleapis.com/auth/youtube'],},function (accessToken, refreshToken, profile, cb) {  const user = {    accessToken: accessToken,    refreshToken: refreshToken,    profile: profile,  };  return cb(null, user);}));passport.serializeUser((user, cb) => {  cb(null, user);});passport.deserializeUser((obj, cb) => {  cb(null, obj);});app.use('/', index);app.use(function(req, res, next) {  var err = new Error('Not Found');  err.status = 404;  next(err);});app.use(function(err, req, res, next) {  res.locals.message = err.message;  res.locals.error = req.app.get('env') === 'development' ? err : {};  res.status(err.status || 500);  res.render('error');});module.exports = app;

Answer 1

好的，这是 Passport 的未解决问题：

https://github.com/jaredhanson/passport/issues/582#issuecomment-506283986

我应该使用 href 而不是 fetch。

可能重复的

从 React 前端向后端的 Google Oauth PassportJS 发送请求时出现 Cors 错误

Answer 2

解决方案是为此使用带有后端路由 url 的锚标记。就像你已经this.router.get("/auth/google", passport.authenticate("google", { scope: ["email", "profile"], successRedirect: "http://localhost:3000" }));为<a href="localhost:3000/auth/google>Click me</a>