我正在將 fetch 從 React 發(fā)送到 Express 以通過(guò) Google 進(jìn)行身份驗(yàn)證,但我的訪問(wèn)被 CORS 錯(cuò)誤阻止。我將 POST 請(qǐng)求從 React 重定向到 Google URL 進(jìn)行身份驗(yàn)證。我嘗試在 Express 應(yīng)用程序中使用 cors,但仍然遇到相同的錯(cuò)誤。 用于獲取
const handleClick = (e) => { fetch('http://localhost:8000/api/mail/login', { method: 'POST' }) .then(res => res.text()) }
在 Express app.js 中使用 cors
app.use(cors())
嘗試重定向到 Google 身份驗(yàn)證
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) })
錯(cuò)誤:訪問(wèn)“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”進(jìn)行提取-ngpfd4ll798v42gfclh7cms9ndqstt32.apps.googleusercontent.com&redirect_uri=http%3A%2F%2Flocalhost%3A8000'(從'http://localhost:8000/api/mail/login'重定向)來(lái)自原點(diǎn)'http://localhost:3000'已被 CORS 策略阻止:請(qǐng)求的資源上不存在“Access-Control-Allow-Origin”標(biāo)頭。如果不透明響應(yīng)滿足您的需求,請(qǐng)將請(qǐng)求模式設(shè)置為“no-cors”以在禁用 CORS 的情況下獲取資源。
身份驗(yàn)證流程必須發(fā)生在可見的瀏覽上下文中,不使用 fetch
請(qǐng)求。換句話說(shuō):您必須導(dǎo)航當(dāng)前選項(xiàng)卡到(或打開一個(gè)新選項(xiàng)卡)http://localhost:8000/api/mail/login,該選項(xiàng)卡將被重定向到 https://accounts.google.com/o/oauth2/v2/auth?..。并且該頁(yè)面變得可見。現(xiàn)在,用戶必須與該頁(yè)面交互以選擇/確認(rèn)他們的 Google 帳戶,之后他們將被重定向到您服務(wù)器上的頁(yè)面,并在 URL 中包含授權(quán)代碼(例如,http://localhost:8000/callback?code =...)并且您的服務(wù)器必須通過(guò)服務(wù)器到服務(wù)器調(diào)用交換訪問(wèn)令牌的授權(quán)代碼。
這樣發(fā)出的請(qǐng)求都不是跨源的,因此根本不會(huì)涉及 CORS。
您需要一個(gè)類似的登錄表單,而不是 handleClick
函數(shù)
<form action="http://localhost:8000/api/mail/login" method="post"> <input type="submit" value="Press to log in"/> </form>