CORS 已阻止对重定向自的提取的访问

Question

我正在从 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 中使用 cors app.js

app.use(cors())

正在尝试重定向到 google auth

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

错误：从来源 'http://localhost:3000' 访问 '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.apps.googleusercontent.com&redirect_uri=http%3A%2F%2Flocalhost%3A8000'（从 'http://localhost:8000/api/mail/login' 重定向）已被 CORS 策略阻止：否 'Access-Control-Allow-Origin' header 出现在所请求的资源上。如果不透明的响应满足您的需求，请将请求的模式设置为 'no-cors' 以在禁用 CORS 的情况下获取资源。

Answer 1

身份验证流程必须在可见的浏览上下文中进行，而不是通过 fetch 请求进行。换句话说：您必须导航当前选项卡到（或在 http://localhost:8000/api/mail/login 打开一个新选项卡），然后选项卡将被重定向到https://accounts.google.com/o/oauth2/v2/auth?..。这个页面变得可见。现在，用户必须与该页面交互以 choose/confirm 他们的 Google 帐户，之后他们将被重定向到您选择的页面（例如，http://localhost:8080/welcome）。

像这样创建时，none 个请求是 cross-origin，因此根本不会涉及 CORS。

代替handleClick函数，您需要一个像

这样的登录表单

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

CORS 已阻止对重定向自的提取的访问

Access to fetch at redirected from has been blocked by CORS

reactjs

express

oauth-2.0

cors

google-oauth