CORS错误：Google OAuth从Reaction到Express(PassportJs验证) [英] CORs Error: Google Oauth from React to Express (PassportJs validation)

问题描述

我正在尝试设置带有Google OAuth身份验证的Reaction/Redux-NodeJS Express堆栈。我的问题是控制台中出现CORS错误。我发现了一些堆栈溢出问题，我觉得这正是我的问题，但解决方案没有产生任何结果。特别是这两个：CORS with google oauth和CORS/CORB issue with React/Node/Express and google OAuth。

所以我尝试了各种修复，似乎都将我带回了同一个错误。以下是其中最直截了当的内容：

const corsOptions = {
    origin: 'http://localhost:3000',
    optionsSuccessStatus: 200,
    credentials: true
}
app.use(cors(corsOptions));

这位于我的API.js文件的根目录中。我收到的控制台错误状态：

CORS策略已阻止从源‘null’访问位于‘https://accounts.google.com/o/oauth2/v2/auth?response_type=code&redirect_uri=http%3A%2F%2Flocalhost%3A5000%2Fapi%2Foauth%2Fgoogle%2Freturn&scope=profile&client_id=PRIVATE_CLIENT_ID.apps.googleusercontent.com’(从‘http://localhost:5000/api/oauth/google’重定向)的XMLHttpRequest：对印前检查请求的响应未通过访问控制检查：请求的资源上不存在‘Access-Control-Allow-Origin’标头。

因此，如果我在开发工具中查看我的网络日志，我会查看我对API路径的请求，并查看我期望看到的内容：

Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: content-type
Access-Control-Allow-Methods: GET,HEAD,PUT,PATCH,POST,DELETE
Access-Control-Allow-Origin: http://localhost:3000

所以在我看来，我的问题不在我的前后沟通范围内。这让我相信这可能是护照令牌验证的问题。以下是我的简化路线：

router.post('/oauth/google', passport.authenticate('googleVerification', {
    scope: ['profile']
}), (req, res) => {
    console.log('Passport has verified the oauth token...');
    res.status(200)
});

和回调路由：

router.get('/oauth/google/return', (req, res) => {
    console.log('google oauth return has been reached...')
    res.status(200)
});

最后，简化策略：

passport.use('googleVerification', new GoogleStrategy({
    clientID: process.env.OAUTH_CLIENT_ID,
    clientSecret: process.env.OAUTH_SECRET,
    callbackURL: 'http://localhost:5000/api/oauth/google/return'
}, (accessToken, refreshToken, profile, cb) => {
    console.log('Passport OAuth Strategy reached');
    cb(null, profile)
}));

我知道所有这些都不会产生任何功能性的东西，但是我已经尽我所能地删除了一些错误信息，试图弄清楚我的身份验证流中的挡路在哪里。以防万一它可能有助于缩小范围，下面是Redux中的操作创建者，它记录了在错误开始出现之前流程中的最后一步(‘redux接受Token并传递给API：’，Token)：

export const signIn = (token) => {
    console.log('redux accepting token and passing to API:', token)
    return async dispatch => {
        const res = await Axios({
            method: 'post',
            url: `${API_ROOT}/api/oauth/google`,
            withCredentials: true,
            data: {
                access_token: token
            }
        })

        console.log('API has returned a response to redux:', res)

        dispatch({
            type: SIGN_IN,
            payload: res
        })
    }
};

这实际上从未到达返回，并且不记录记录的第二个console.log。

谷歌

CORS与向console.developers.google.com发出请求无关，因为当您在推荐答案中注册应用程序时，它已经由谷歌处理。

该问题存在于CRA开发人员服务器和Express API服务器之间。您正在从localhost：3000向发出请求。若要修复此问题，请使用代理。

在客户端目录中：

npm i http-proxy-middleware --save

在客户端/src中创建setupProxy.js文件。不需要在任何地方导入这个。create-action-app将查找此目录

将您的代理添加到此文件：

module.exports = function(app) {
    app.use(proxy("/auth/google", { target: "http://localhost:5000" }));
    app.use(proxy("/api/**", { target: "http://localhost:5000" }));
};

我们的意思是创建代理，如果任何人尝试访问我们Reaction服务器上的route/api或/auth/google，则会自动将请求转发到localhost：5000。

以下是更多详细信息的链接：

https://create-react-app.dev/docs/proxying-api-requests-in-development/

默认情况下，password.js不允许代理请求。

passport.use('googleVerification', new GoogleStrategy({
    clientID: process.env.OAUTH_CLIENT_ID,
    clientSecret: process.env.OAUTH_SECRET,
    callbackURL: 'http://localhost:5000/api/oauth/google/return',
    proxy:true
}

这里重要的一点是，您应该了解为什么使用代理。据我从您的代码中了解，在浏览器中，您向express发出请求，express将使用password.js处理身份验证。在password.js运行完所有身份验证步骤后，它将创建一个cookie，将其填充到id中，并将其提供给express，express会将其发送到浏览器。这是您的应用程序结构：

 BROWSER ==> EXPRESS ==> GOOGLE-SERVER

浏览器会自动将Cookie附加到向发出Cookie的服务器发出的每个请求。因此浏览器知道哪个Cookie属于哪个服务器，因此当它们向该服务器发出新请求时，它们会附加该请求。但在您的应用程序结构中，浏览器并没有与Google-server对话。如果你没有使用代理，你会通过快递从google-server获取cookie，但是因为你没有向google-server提出请求，所以cookie不会被使用，它不会被自动附加。这就是使用cookie的意义所在，浏览器会自动附加cookie。通过设置代理，现在浏览器不会察觉到Google-SERVER。据它所知，它正在向快递服务器发出请求。因此，每次浏览器使用相同的端口请求快递时，它都会附加cookie。我希望这一部分讲清楚了。

现在Reaction仅与Express-Server通信。

  BROWSER ==> EXPRESS

由于Reaction和Exress不在同一端口，您将收到CORS错误。

有两种解决方案。%1正在使用cors包。

其设置非常简单

var express = require('express')
var cors = require('cors')
var app = express()
 
app.use(cors()) // use this before route handlers

第二个解决方案是在路由处理程序之前手动设置中间件

app.use((req, res, next) => {
  res.setHeader("Access-Control-Allow-Origin", "*");
  res.setHeader(
    "Access-Control-Allow-Methods",
    "OPTIONS, GET, POST, PUT, PATCH, DELETE"
  );
  res.setHeader("Access-Control-Allow-Headers", "Content-Type, Authorization");
  next(); // dont forget this
});

这篇关于CORS错误：Google OAuth从Reaction到Express(PassportJs验证)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！