node.js - cors 问题与 passport.js google oauth 策略

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。

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

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

第三，你确定指定的headers吗？

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

app.use(cors());

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

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