使用 fetch 和 Passport 会得到 "No 'Access-Control-Allow-Origin'请求的资源上存在标头." [英] Using fetch with Passport gets "No 'Access-Control-Allow-Origin' header is present on the requested resource."
问题描述
我正在尝试在我的网站上放置一个按钮，让用户授权访问他的 YouTube 帐户.我正在使用 Passport 进行身份验证.我的代码正在使用 fetch 发送请求.当我点击按钮时，我得到:
I am trying to put a button on my website which will let the user authorize access to his YouTube account. I am using Passport for the authentication. My code is using fetch to send the request. When I click on the button, I get:
访问获取'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') from origin'http://localhost:3000' 已被 CORS 策略阻止:响应预检请求未通过访问控制检查:否请求中存在Access-Control-Allow-Origin"标头资源.如果不透明的响应满足您的需求，请设置请求的模式为 'no-cors' 以在禁用 CORS 的情况下获取资源.
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.
如果我使用 href 到/google 就可以了.
If I use an href to /google it works.
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>
推荐答案
好的，这是 Passport 的未解决问题:
OK this is an open issue with Passport:
https://github.com/jaredhanson/passport/issues/582#issuecomment-506283986
我应该使用 href 而不是 fetch.
I should use the href and not fetch.
可能重复
Cors 错误时从 React 前端向后端的 Google Oauth PassportJS 发送请求
这篇关于使用 fetch 和 Passport 会得到 &quot;No &#39;Access-Control-Allow-Origin&#39;请求的资源上存在标头."的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
