проблема cors с паспортом. js стратегия Google oauth

Question

У меня есть такая настройка:

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

На моем сервере. 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);

Внутри моей аутентификации. 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,
};

Внутренний паспорт. 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.

Doea кто-нибудь знает, как я могу решить эту проблему? В консоли mu google я настроил URL-адрес перенаправления как 'http://localhost: 3000 / auth / google / callback'

Answer 1

Проблема в том, что даже если вы использовали пакет cors, вы не добавили следующий параметр Access-Control-Allow-Origin в cors. Попробуйте это:

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

})

);

Или, как уже упоминал sh, просто используйте:

app.use(cors())

Для получения дополнительной информации проверьте официальный npm документация cors

Answer 2

Вы неправильно сконфигурировали CORS на вашем сервере.

Во-первых, вы используете неправильный синтаксис, когда дело доходит до methods - при их перечислении не должно быть пробелов (я не знаю, как они анализируют строку, но вам, вероятно, следует придерживаться документации - согласно документации, вы можете указать методы либо в виде строки: 'GET,PUT,POST', либо в виде списка: ['GET', 'PUT', 'POST'].

Во-вторых, вам не хватает OPTIONS Метод HTTP в methods, который используется браузерами в предварительном запросе для проверки конфигурации CORS сервера.

В-третьих, уверены ли вы в указанных заголовках?

Самый простой вариант - удалить полностью настройте конфигурацию CORS options, если вы не уверены, что делаете, и применяйте cors глобально перед каждым запросом.

app.use(cors());

Или укажите только c путь, в котором вы хотите разрешить CORS.

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

Answer 3

Возможно, вы не настроили политику cors в своем бэкэнде.

Самый простой способ - установить пакет cors, если вы используете Express.

npm install cors

и используйте это как промежуточное программное обеспечение вашего express приложения.

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