将 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>