与Passport一起使用获取将获取“所请求的资源上没有'Access-Control-Allow-Origin'标头”

问题描述

我正在尝试在我的网站上放置一个按钮，该按钮将允许用户授权访问其YouTube帐户。我正在使用Passport进行身份验证。我的代码正在使用访存发送请求。当我单击按钮时，我得到：

访问地址为 '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的情况下获取资源。

如果我使用href来访问/ google，那么它会起作用。

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,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,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,next) {
  res.render('index');
});

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

router.get('/googlecb',passport.authenticate('youtube'),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>

解决方法

好的，这是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

cors cors cors fetch-api google-api javascript passport.js