将 fetch 与 Passport 结合使用可获得 "No 'Access-Control-Allow-Origin' header is present on the requested resource."

Question

我想在我的网站上放置一个按钮，让用户授权访问他的 YouTube 帐户。我正在使用 Passport 进行身份验证。我的代码使用 fetch 来发送请求。当我点击按钮时，我得到：

Access to fetch at '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=...' (redirected from 'http://localhost:3000/google') from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

如果我使用 /google 的 href 就可以了。

app.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;

index.js:

const express = require('express');
const passport = require('passport');

const router = express.Router();

router.get('/', function(req, res, next) {
  res.render('index');
});

router.get('/google', async (req, res) => {
  passport.authenticate('youtube')(req, res, () => res.send('ok'));
});

router.get('/googlecb', passport.authenticate('youtube'), async (req, res) => {
  const name = req.user.profile.displayName;
  console.log('googlecb name: ' + name);
  return res.send(req.user);
});

module.exports = router;

index.ejs:

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <p><button id="auth" onclick="go()">Authorize</button><p>
    <p><a href="/google">Authorize</a><p>
    <script> 
async function go() {
  console.log('go');
  await fetch('/google',
    {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
      },
    },
  )
  .then(response => {
    console.log('response');
    return response.json();
  })
  .then(data => {
    console.log('data');
  });
}
    </script>
  </body>
</html>

Answer 1

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

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

我应该使用 href 而不是 fetch。

可能与

重复

Cors error when sending request from React frontend to Google Oauth PassportJS on backend

将 fetch 与 Passport 结合使用可获得 "No 'Access-Control-Allow-Origin' header is present on the requested resource."

Using fetch with Passport gets "No 'Access-Control-Allow-Origin' header is present on the requested resource."

javascript

google-api

cors

passport.js

fetch-api