node.js - 由于 CORS 政策,对 google oAuth 的 Angular 请求失败
问题描述
我已经设置了一个带有 google 身份验证的 angular/nodejs(express) 应用程序,但是每当我通过 angular 应用程序向 google oauth 请求时,它都会引发一个 cors 错误,但是如果我直接从浏览器请求它,它应该可以正常工作。
后端在端口 3000 上运行,角度在 4200 上运行。
我正在使用cors
包来允许 server.js 中的所有 cors 请求:
app.use(passport.initialize());
// Passport Config
require('./config/passport')(passport);
// Allowing all cors requests
app.use(cors());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/users', usersRouter);
app.use('/auth', authRouter);
护照配置:
passport.use(
new GoogleStrategy(
keys,
(token, refreshToken, profile, done) => {
process.nextTick(() => {
User.findOne({ email: email })
.then(user => {
if (user) {
return done(null, user);
}
})
.catch(err => console.log(err));
});
}
)
);
这是谷歌身份验证路线:
router.get('/google', passport.authenticate('google', {
scope: ['profile', 'email'],
session: false
}),
(req, res) => {
// Create JWT payload
const payload = {
id: req.user.id,
email: req.user.email
};
jwt.sign(payload, secret, expires, (err, token) => {
res.json(token);
});
}
);
这是角度请求:
googleAuth() {
return this.http.get<any>('http://localhost:3000/auth/google').pipe(
map(user => {
if (user) {
localStorage.setItem(
'currentUser',
JSON.stringify(user)
);
}
return user;
})
);
}
铬控制台中的错误:
Failed to load "https://accounts.google.com/o/oauth2/v2/auth?response_type=code...": No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access
我还在谷歌开发者控制台中授权了 JavaScript 来源: origins
我对 angular 和 nodejs 很陌生,我已经阅读了所有类似的问题,但找不到解决这个问题的方法。
解决方案
试试这种直接调用 URL 的方法:(如果我在语法上遗漏了一些东西,请原谅,但基本上是这个想法)
googleAuth(){
window.open('/google',"mywindow","location=1,status=1,scrollbars=1, width=800,height=800");
let listener = window.addEventListener('message', (message) => {
//message will contain google user and details
});
}
在服务器中,我假设您设置了护照策略,现在
router.get('/google', passport.authenticate('google', {
scope: ['profile', 'email'],
session: false } ))
router.get('/google/callback',
passport.authenticate('google', { failureRedirect: '/auth/fail' }),
function(req, res) {
var responseHTML = '<html><head><title>Main</title></head><body></body><script>res = %value%; window.opener.postMessage(res, "*");window.close();</script></html>'
responseHTML = responseHTML.replace('%value%', JSON.stringify({
user: req.user
}));
res.status(200).send(responseHTML);
});
推荐阅读
- javascript - document.execCommand() 方法不适用于 Iphone 中的 safari
- c - 用 C 计算
- java - 如何在 jenkinsfile 中将参数传递给 sbt
- javascript - 为什么 splice 方法只删除 React 中的第一个数组索引?
- c# - Asp.Net Core 3(Blazor 客户端)的构建失败
- react-native - 如何突出显示平面列表中的项目并显示删除选项以在长按该项目时从列表中删除该项目?
- android - 如何创建android服务来检查用户是否打开另一个应用程序
- javascript - 为变量分配新值会从内存中清除旧值?
- javascript - 数据表中的舍入列页脚
- git - 恢复已删除的有一些更改的 git 文件