护照.js谷歌oauth策略的cors问题

Question

我有这样的设置：

-backend
    -model
        --User.js
    -routes
        --auth.js
    -database
        --connection.js
    -passport
        --passport.js
    --server.js
-client
     -react folders / files
     ...

在我的 server.js 中：

const express = require("express");
const cookieSession = require("cookie-session");
const passport = require("passport");

const { authRoutes } = require("./routes/auth");

require("./model/User");
require("./services/passport");
require("./services/mongoConnect");

const app = express();

app.use(
    cookieSession({
        maxAge: "30 * 24 * 60 * 60 * 1000",
        keys: "MY-KEY",
    })
);
app.use(
    cors({
        origin: true,
        methods: "GET, POST, PATCH, DELETE, PUT",
        allowedHeaders: "Content-Type, Authorization",
    })
);

app.use(passport.initialize());
app.use(passport.session());

const PORT = process.env.PORT || 5000;

app.use("/", authRoutes);

app.listen(PORT);

在我的路由器内的 auth.js 文件中

const passport = require("passport");
const router = require("express").Router();

router.get(
    "/auth/google",
    passport.authenticate("google", {
        scope: ["profile", "email"],
    })
);

router.get("/auth/google/callback", passport.authenticate("google"));

router.get("/api/logout", (req, res) => {
    req.logout();
    res.send(req.user);
});

router.get("/api/current_user", (req, res) => {
    res.send(req.user);
});

module.exports = {
    authRoutes: router,
};

在我拥有的 passport.js 文件中

const passport = require("passport");
const GoogleStrategy = require("passport-google-oauth20").Strategy;
const mongoose = require("mongoose");

const User = mongoose.model("users");

passport.use(
    new GoogleStrategy(
        {
            clientID: "MY-ID",
            clientSecret: "MY-SECRET",
            callbackURL: "/auth/google/callback",
            proxy: true,
        },
        (accessToken, refreshToken, profile, done) => {
            User.findOne({ googleId: profile.id }).then((existingUser) => {
                if (existingUser) {
                    done(null, existingUser);
                } else {
                    new User({
                        googleId: profile.id,
                    })
                        .save()
                        .then((newUser) => {
                            done(null, newUser);
                        });
                }
            });
        }
    )
);

passport.serializeUser((user, done) => {
    done(null, user._id);
});

passport.deserializeUser((id, done) => {
    User.findById(id).then((user) => {
        done(null, user);
    });
});

我的前端包含一个点击我的 auth/google 路由的按钮。但是，它会在控制台中记录一个 cors 问题错误。

(redirected from 'http://localhost:3000/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.

有谁知道我该如何解决这个问题？在 mu google 控制台中，我将重定向 url 设置为 'http://localhost:3000/auth/google/callback'

Answer 1

您在后端错误配置了 CORS。

首先，当涉及到methods 时，您使用了错误的语法 - 列出它们时不应该有空格（我不知道他们如何解析字符串，但您可能应该坚持使用文档 - 根据文档，您可以将方法指定为字符串：'GET,PUT,POST' 或列表：['GET', 'PUT', 'POST']。

其次，您在methods 中缺少OPTIONS HTTP 方法，浏览器在预检请求中使用该方法来测试服务器的 CORS 配置。

三、你确定指定的headers吗？

如果您不确定自己在做什么，最简单的选择是完全删除 CORS options 配置，并在每次请求之前全局应用 cors。

app.use(cors());

或者只到您希望允许 CORS 的特定路径。

app.get("/somepath", cors(), (req, res) => {...

Answer 2

问题是即使您使用了 cors 包，您也没有在 cors.xml 中添加以下 Access-Control-Allow-Origin 选项。试试这个：

app.use(
cors({
    origin: '*',
    methods: "GET, POST, PATCH, DELETE, PUT",
    allowedHeaders: "Content-Type, Authorization",

})

);

或者正如 yash 提到的，只需使用：

app.use(cors())

For more reference check the official npm cors documentation

Answer 3

也许您没有在后端配置 cors 策略。

如果你使用Express，最简单的方法是安装cors包。

npm install cors

并将其用作您的 express 应用的中间件。

var app = express()
var cors = require('cors');
...
app.use(cors());

Answer 4

首先，您需要使用“*”或客户特定的白名单网址更新 cors 来源。但仅凭这一点并不能解决问题。 您的按钮应该在浏览器上加载 auth url，而不是对 auth/google 路由进行 api 调用。因此，您可以将按钮设为 href 链接。