Почему я получаю ошибку перед полетом при установке CORS на Express?

Question

Я настраиваю api rest для личного сайта.Мой личный сайт построен с помощью Vue.js, а сервер API построен с помощью Express.Я пробовал пару разных конфигураций CORS на сервере, но мне кажется, что я все еще получаю ошибку перед полетом, поэтому я предполагаю, что где-то не хватает понимания.

Первоначально я хотел узнать о докере, поместив сервер api / auth в контейнер и разместив его отдельно от приложения frontend vue.js.Это часть проблемы или плохая практика?

Ниже приведены две конфигурации CORS, которые я пробовал, которые я нашел в других сообщениях, но не увенчались успехом.

Конфиг # 1:

app.use((req, res, next) => {

    res.header("Access-Control-Allow-Origin", "http://0.0.0.0:5000"); // I tried setting a specific IP as well as the * wildcard
    res.header("Access-Control-Allow-Methods", "GET,PUT,POST,DELETE,OPTIONS");
    res.header("Access-Control-Allow-Headers", "Content-type,Accept,X-Custom-Header");

    // I think this if statement should respond the preflight request.
    if (req.method === "OPTIONS") {
        return res.status(200).end();
    }

    return next()

})

Конфиг # 2:

const whitelist = [
    'http://0.0.0.0:5000',
];
const corsOptions = {
    origin: function(origin, callback){
        var originIsWhitelisted = whitelist.indexOf(origin) !== -1;
        callback(null, originIsWhitelisted);
    },
    credentials: true
};
app.use(cors(corsOptions));

Мне также интересно, связано ли это с тем, как я делаю запрос, поэтому я добавил метод, который используется из приложения Vue.js:

attemptLogin: function(event) {
            event.preventDefault()
            axios.post('http://0.0.0.0:5000/auth/login', { 
                username: this.username, 
                password: this.password 
            })
            .then(res => {
                if (res.data.success) {
                    this.updateLoginStatus()
                    this.updateJwt(res.data.token)
                }
            })
            .catch(error => {
                console.log(error)
            });
        }

Другая потенциально полезная информация:

Я попытался запустить и интерфейс, и сервер на одном компьютере, но безуспешно.Теперь я запускаю бэкэнд на моем ноутбуке и фронтенд на моем рабочем столе.

Вот репозитории GitHub для обоих репозиториев, если вам нужно больше контекста:

Внешний интерфейс: https://github.com/lwerner27/personal-vue

Серверная часть: https://github.com/lwerner27/personal-backend

Answer 1

проблема может заключаться в том, что вместо

axios.post('http://0.0.0.0:5000/auth/login', { 
                username: this.username, 
                password: this.password 
            })

try using http://0.0.0.0:5000/auth/login/ Раньше у меня возникала ошибка предпечатной проверки также в mozilla и других браузерах, если она не была косой в конце.Могу я узнать, какая именно ошибка в CORS?

Answer 2

Если вы работаете из того же источника, это не должно быть проблемой.Я подозреваю, что вы запускаете приложение Vue через npm run serve, а затем указываете его на внутренний сервер, который работает на другом сервере.

Попробуйте создать каталог в вашем бэкэнде с именем public.В Vue запустите npm run build, затем возьмите минимизированные файлы и поместите их в публичный каталог.

Затем предоставьте доступ к нему в узле, используя команду express:

app.use(express.static(path.join(__dirname, 'public')));