對 https://accounts.google .com/o/oauth2/v2/auth 的 fetch 存取已被 CORS 阻止

Question

我正在將 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())

嘗試重定向到 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)
})

錯誤：造訪「https://accounts.google .com/o/oauth2/v2/auth?access_type=offline&scope=https://mail.google. com/&response_type=code&client_id=727520060136」進行擷取-ngpfd4ll79842292 apps.googleusercontent.com&redirect_uri=http://localhost:8000'（從'http://localhost:8000/api/mail/login'重定向）來自原點'http://localhost:3000'已被CORS 政策阻止：請求的資源上不存在「Access-Control-Allow-Origin」標頭。如果不透明回應滿足您的需求，請將請求模式設為「no-cors」以在停用 CORS 的情況下取得資源。

Answer 1

身份驗證流程必須發生在可見的瀏覽上下文中，不使用 fetch 請求。換句話說：您必須導覽目前分頁到（或開啟新分頁）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>