对 https://accounts.google.com/o/oauth2/v2/auth 的 fetch 访问已被 CORS 阻止

2023-11-24

我正在将 fetch 从 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())

尝试重定向到谷歌身份验证

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)
})

错误:访问“https://accounts.google.com/o/oauth2/v2/auth?access_type=offline&scope=https%3A%2F%2Fmail.google.com%2F&response_type=code&client_id=727520060136-ngpfd4ll798v42gfclh7cms9ndqstt32”进行获取。来自原点“http://localhost:3000”的 apps.googleusercontent.com&redirect_uri=http%3A%2F%2Flocalhost%3A8000'(从“http://localhost:8000/api/mail/login”重定向)已被阻止CORS 策略:请求的资源上不存在“Access-Control-Allow-Origin”标头。如果不透明响应满足您的需求,请将请求模式设置为“no-cors”以在禁用 CORS 的情况下获取资源。


身份验证流程必须发生在可见的情况下浏览上下文,不带fetch要求。换句话说:你必须navigate当前选项卡(或打开新选项卡)http://localhost:8000/api/mail/login,选项卡将被重定向到https://accounts.google.com/o/oauth2/v2/auth?..。并且该页面变得可见。现在,用户必须与该页面交互以选择/确认他们的 Google 帐户,之后他们将被重定向到您服务器上的页面,并在 URL 中包含授权代码(例如,http://localhost:8000/callback?code =...) 并且您的服务器必须通过服务器到服务器调用交换访问令牌的授权代码。

这样发出的请求都不是跨源的,因此根本不会涉及 CORS。

而不是handleClick功能,你需要一个登录表单,例如

<form action="http://localhost:8000/api/mail/login" method="post">
  <input type="submit" value="Press to log in"/>
</form>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

对 https://accounts.google.com/o/oauth2/v2/auth 的 fetch 访问已被 CORS 阻止 的相关文章

随机推荐