身份验证重定向CORS问题Passport / ReactJS / Express

问题描述

我正在构建Create-React-App网络应用程序的身份验证部分。本地主机中不同端口上的Express Server-解决了CORS问题，可在应用程序和服务器之间进行通信。

我正在使用护照与Google和Facebook进行OAuth2身份验证。

当我访问Express端点以对Google或Facebook进行身份验证时，我会在我的应用程序控制台中收到以下错误消息：

Facebook：

Access to XMLHttpRequest at 'https://www.facebook.com/v3.2/dialog/oauth?response_type=code&redirect_uri=https%3A%2F%2Flocalhost%3A3010%2Fauth%2Ffacebook%2Fredirect&client_id=760935710741028' (redirected from 'https://localhost:3010/auth/facebook') from origin 'http://localhost:3000'
has been blocked by CORS policy: No 'Access-Control-Allow-Origin'
header is present on the requested resource.

xhr.js: 184 GET https: //www.facebook.com/v3.2/dialog/oauth?response_type=code&redirect_uri=https%3A%2F%2Flocalhost%3A3010%2Fauth%2Ffacebook%2Fredirect&client_id=760935710741028 net::ERR_Failed

  createError.js: 16 Uncaught( in promise) Error: Network Error
at createError(createError.js: 16)
at XMLHttpRequest.handleError(xhr.js: 91)

Google：

logins: 1 Access to XMLHttpRequest at 'https://accounts.google.com/o/oauth2/v2/auth?response_type=code&redirect_uri=https%3A%2F%2Flocalhost%3A3010%2Fauth%2Fgoogle%2Fredirect&scope=profile&client_id=935317646201-d42ce4q3ii6546p2177bhvkshp9obr9t.apps.googleusercontent.com' (redirected from 'https://localhost:3010/auth/google') from origin 'http://localhost:3000'
has been blocked by CORS policy: No 'Access-Control-Allow-Origin'
header is present on the requested resource.

xhr.js: 184 GET https: //accounts.google.com/o/oauth2/v2/auth?response_type=code&redirect_uri=https%3A%2F%2Flocalhost%3A3010%2Fauth%2Fgoogle%2Fredirect&scope=profile&client_id=935317646201-d42ce4q3ii6546p2177bhvkshp9obr9t.apps.googleusercontent.com net::ERR_Failed

  createError.js: 16 Uncaught( in promise) Error: Network Error
at createError(createError.js: 16)
at XMLHttpRequest.handleError(xhr.js: 91)

奇怪的是，如果我单击控制台中的链接，则该过程实际上没有问题。重定向似乎有问题，但我找不到解决方法。

代码：

Express index.js：

const express = require('express')
const http = require('http')
const https = require('https')
const os = require('os')
const fs = require('fs')
const path = require('path')
const cors = require('cors')

const authRoutes = require('./routes/passport-auth')
require('./utils/passport')

const app = express()
app.use(cors())

app.use('/auth',authRoutes)

app.get('/',(req,res) => {
  res.send('playground-nodejs nodemon home')
})

app.use(express.json())

//Server setup
if (app.get('env') === 'development') {

  const sslKeyPath = path.join(os.homedir(),'Desktop/Desarrollo/ssl/localhost.key')
  const sslCertPath = path.join(os.homedir(),'Desktop/Desarrollo/ssl/localhost.cert')

  const sslserver = https.createServer({
    key: fs.readFileSync(sslKeyPath),cert: fs.readFileSync(sslCertPath)
  },app)

  sslserver.listen(3010,() => {
    console.log('SSL playground-node is up in port 3010')
  })

} else {

  const server = http.createServer(app)

  server.listen(3001,() => {
    console.log('playground-node is up in port 3001')
  })

}

护照设置：

const passport = require('passport')
const GoogleStrategy = require('passport-google-oauth20')
const FacebookStrategy = require('passport-facebook')

passport.use(
  new GoogleStrategy({
    callbackURL: '/auth/google/redirect',clientID: process.env.GOOGLE_CLIENT_ID,clientSecret: process.env.GOOGLE_CLIENT_SECRET
  },(accesstoken,refreshToken,profile,cb) => {
    //passport callback function
    console.log({
      accesstoken,profile
    })
    done(null,profile)
  })
)

passport.use(
  new FacebookStrategy({
    clientID: process.env.FACEBOOK_CLIENT_ID,clientSecret: process.env.FACEBOOK_CLIENT_ID,callbackURL: '/auth/facebook/redirect'
  },done) => {
    //passport callback function
    console.log({
      accesstoken,profile)
  })
)

护照路线：

const route = require('express').Router()
const passport = require('passport')

route.get('/google',passport.authenticate('google',{
  scope: ['profile']
}))

route.get('/google/redirect',passport.authenticate('google'),res) => {
  res.send('You reached GOOGLE callback URI')
})

route.get('/facebook',passport.authenticate('facebook'))

route.get('/facebook/redirect',res) => {
  res.send('You reached FACEBOOK callback URI')
})

module.exports = route

谢谢

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）