Как читать пользовательский заголовок в промежуточном программном обеспечении CORS

Question

Я создал промежуточное программное обеспечение CORS с использованием пакета CORS . Это промежуточное программное обеспечение будет вызываться перед каждым вызовом. Вот моя реализация.

const corsMiddleware = async (req, callback) => {
  const { userid } = req.headers|| req.cookies {};
  let whiteList = await getWhiteListDomains(userid)
  return callback(null, {
    origin: whiteList,
    credentials: true,
    allowedHeaders: ["userid", "authorization", "content-type"]
  });
};

И добавил это промежуточное ПО перед инициализацией маршрута как

app.use(cors(corsMiddleware));
app.options("*", cors(corsMiddleware));



app.get("/user", (req, res, next)=>{
    // code
})

Из браузера Я пытаюсь вызвать API как

axios({ method: "get", url: "http://localhost:3000/user", headers: {userId:"1234"} });

При отладке на сервере я вижу

access-control-request-headers:"userid"

в заголовках объекта запроса.

Я не могу прочитать пользовательский заголовок. Это может произойти, потому что я пытаюсь прочитать пользовательский заголовок перед инициализацией CORS. Но все же я хочу прочитать этот пользовательский заголовок.

Answer 1

В вашем коде в основном две проблемы.

Первая, и ее легче решить, это то, что вам не хватает access-control-allow-origin в опции, которая устанавливает Access-Control-Allow-Headers:

return callback(null, {
  origin: whiteList,
  credentials: true,
  allowedHeaders: [
    "access-control-allow-origin",
    "authorization",
    "content-type",
    "userid"
  ]
});

Второй является наиболее важным, поскольку он связан с тем, как работает CORS. Эта проблема, с которой вы столкнулись, заключается в том, что CORS уже отклоняет петицию в запросе OPTIONS перед полетом. Он никогда не позволяет браузеру выполнить запрос GET.

Вы говорите, что хотите прочитать пользовательский заголовок userId в запросе перед полетом OPTIONS, но не можете. Причина в том, что предварительный запрос OPTIONS создается браузером автоматически и не использует настраиваемые заголовки, которые вы настраиваете в вызове Ax ios. Он только отправит эти заголовки для CORS:

Origin // URL that makes the request
Access-Control-Request-Method // Method of the request is going to be executed 
Access-Control-Request-Headers // Headers allowed in the request to be executed

Поскольку ваш настраиваемый заголовок не отправляется, поэтому перед полетом OPTIONS при попытке получить доступ к значению userId, вы получите undefined значение:

const { userid } = req.headers|| req.cookies;
console.log(userid); // undefined

И поскольку вы используете это значение, которое не совпадает в вашей асиновой c функции getWhiteListDomains, вероятно, получите другое undefined, значение, установленное в опции origin промежуточного программного обеспечения CORS, равно undefined, что вызывает то, что промежуточное программное обеспечение CORS отклоняет запрос перед полетом OPTIONS.

let whiteList = await getWhiteListDomains(userid); // userid === undefined
console.log(whitelist); // undefined
return callback(null, {
  origin: whiteList, // undefined
  credentials: true,
  allowedHeaders: ["userid", "authorization", "content-type"]
});

Я не совсем уверен, какова ваша цель пытаюсь использовать ваш пользовательский заголовок в качестве проверки CORS, но я бы посоветовал при работе с настраиваемой конфигурацией CORS проверять только заголовок Origin, потому что это его цель: для ограничения и контроля того, какие URL-адреса могут иметь доступ к вашему серверу и ресурсам. .

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