Предварительная проверка CORS не удалась, React to Express

Question

При отправке запроса через CORS из моего приложения React на мой сервер Node.JS и Express.js я получаю:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:3001/students/login. (Reason: CORS preflight channel did not succeed).

Я использую axios для отправки запросов, и это конфигурация запроса:

({ email, password }) => {
        return axios.post(API_ENDPOINT + UCENIK.post.login,
            { email, password },
            {
                withCredentials: true,
                Headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                }
            })
    }

Я пытался разрешить CORS в Express с этими заголовками:

app.use(function (req, res, next) {
    res.header("Access-Control-Allow-Origin", req.headers.origin);
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization')");
    res.header("Access-Control-Allow-Credentials", true);
    res.header("Access-Control-Allow-Methods", "GET, PUT, POST, DELETE, OPTIONS");
    next();
});

Редактировать: исправлено с помощью модуля npm Cors и предоставить этот объект для настроек:

{
    origin: 'http://localhost:3000',
    cors: true
}

Answer 1

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

Вместо использования CORS в вашем цикле разработки попробуйте перенаправить запрос с вашего внешнего сервера на ваш экспресс-сервер.

Например, веб-пакет devserver имеет отдельную конфигурацию прокси https://webpack.js.org/configuration/dev-server/#devserver-proxy