oauth-2.0 CORS已阻止在重定向来源获取

idv4meu8  于 2022-10-31  发布在  其他
关注(0)|答案(1)|浏览(139)

我正在从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的情况下提取资源。

yqlxgs2m

yqlxgs2m1#

身份验证流必须在可见的浏览上下文中进行,而不是通过fetch请求进行。您必须 * 导航 * 当前选项卡到(或打开一个新的选项卡在)http://localhost:8000/api/mail/login,该选项卡将被重定向到https://accounts.google.com/o/oauth2/v2/auth?...和此页面变得可见。现在用户必须与该页面交互,以选择/确认他们的Google帐户,然后他们将被重定向到您选择的页面(例如,http://localhost:8000/welcome)。
当这样做时,所做的请求没有一个是跨源的,所以根本不会涉及CORS。
除了handleClick函数,您还需要一个登录表单,如

<form action="http://localhost:8000/api/mail/login" method="post">
  <input type="submit" value="Press to log in"/>
</form>

相关问题