我正在从React向Express发送获取请求以向Google进行身份验证,但我的访问被CORS错误阻止。我正在将POST请求从React重定向到Google URL以进行身份验证。我尝试在Express应用中使用cors,但我仍然收到相同的错误。对于获取
const handleClick = (e) => {
fetch('http://localhost:8000/api/mail/login', {
method: 'POST'
})
.then(res => res.text())
}
在express app.js中使用cors
app.use(cors())
尝试重定向到Google身份验证
const oauth2Client = new google.auth.OAuth2(
process.env.CLIENT_ID,
process.env.CLIENT_SECRET,
process.env.REDIRECT_URI
)
const url = oauth2Client.generateAuthUrl({
access_type: 'offline',
scope: process.env.SCOPE
})
const gmail = google.gmail({
version: 'v1',
auth: oauth2Client
})
router.post('/login', (req, res, next) => {
res.redirect(url)
})
CORS策略阻止了从源地址“http://localhost:3000”到“http://accounts.google.com/o/oauth2/v2/auth”(从"http://localhost:8000/api/mail/login“重定向)进行提取的访问:请求的资源上不存在“Access-Control-Allow-Origin”标头。如果不透明响应满足您的需要,请将请求的模式设置为“no-cors”,以便在禁用CORS的情况下提取资源。
1条答案
按热度按时间yqlxgs2m1#
身份验证流必须在可见的浏览上下文中进行,而不是通过
fetch
请求进行。您必须 * 导航 * 当前选项卡到(或打开一个新的选项卡在)http://localhost:8000/api/mail/login,该选项卡将被重定向到https://accounts.google.com/o/oauth2/v2/auth?...和此页面变得可见。现在用户必须与该页面交互,以选择/确认他们的Google帐户,然后他们将被重定向到您选择的页面(例如,http://localhost:8000/welcome)。当这样做时,所做的请求没有一个是跨源的,所以根本不会涉及CORS。
除了
handleClick
函数,您还需要一个登录表单,如