Рубрики
Без рубрики

5 лучших проблем CORS, с которыми вы не хотите сталкиваться

Что такое CORS? CORS означает обмен ресурсами Cross Origin, который использует дополнительный HTTP HE … Tagged с Cors, Node, JavaScript.

Cors означает Обмен ресурсами Cross Origin , который использует дополнительные заголовки HTTP, чтобы сообщить браузерам, чтобы дать веб -приложение, работающее на одном происхождении, доступ к ресурсам из другого происхождения. Например, если ваш фронтэнд размещен на другой платформе, чем ваш бэкэнд, поэтому вам нужно сделать HTTP-запросы, чтобы получить ваши данные оттуда, которые браузер блокирует по умолчанию (как его размещают на перекрестном происхождении, а не одинаково- источник). Это мера безопасности, которую мы принимаем, чтобы защитить наших клиентов от CSRF атаки . Вот где входит концепция CORS.

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

Я был совершенно неизвестен в отношении CORS, поэтому я написал свое приложение Express и добавил прокси в React’s Package.json Чтобы получить доступ к бэкэнд -маршрутам в разработке. Но как только я пошел на производство, мое приложение осталось в состоянии загрузки, и моя консоль обнаружила эти ошибки.

Маршруты были разными, так как я не мог снять скриншот своей собственной ошибки, но сообщение было одинаковым. Это не сработало в Интернете, хотя мой Prod преуспел, и все сработало на местном уровне.

Он пытается сказать, что наше происхождение заблокировано политикой CORS, поэтому мы не можем получить доступ к данным из бэкэнда. Также написано, Нет Access-Control-Allow-Origin Присутствует заголовок, в котором находится заголовок HTTP, который говорит, какие истоки могут иметь доступ к нашим данным. Нам нужно добавить на нее нашу конечную точку фронта, чтобы она могла отправить нам все свои данные по запросу.

Исправить

Вы можете добавить упомянутый заголовок HTTP в ваш ответ с сервера, чтобы больше не получить такие ошибки. Это можно легко сделать, добавив это в ваш корневой файл на сервере.

app.use((req, res, next) => {
  res.header("Access-Control-Allow-Origin", "*");
  next();
});

* это подстановочный знак, который позволяет всем происхождениям (веб -сайтам) делать запросы на ваш сервер, и он больше не будет бросить такие ошибки CORS.

Что ж, проблема в том, что если вы отправляете некоторые учетные данные, такие как файлы cookie в вашем запросе, что означает, что у вас есть с Credentials: True (в Axios) или Учетные данные: «Включить» (В выборке) Затем он снова заблокирует запрос с ошибкой что -то вроде этой.

Это мое фактическое сообщение об ошибке, если оно не читается ниже.

The value of the `Access-Control-Allow-Origin` header in the response must not be the wildcard `*` when the request's credentials mode is `include`. Origin is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

Это означает, что сервер не разрешает запросы от всех источников, когда он получает конкретные учетные данные, такие как файлы cookie от пользователя, поэтому мы снова заблокированы Cors.

Исправить

Просто добавьте свой URL или любой другой веб -сайт, который вы хотите получить к вашему API вместо * . Если у вас более одного, то не стесняйтесь, чтобы запятнать отделить ее.

Что такое предварительный полевой полет?

Предварительный запрос представлен, чтобы увидеть, понимается ли протокол CORS и безопасно ли отправлять исходные запросы. Запросы, такие как Удалить, положить или другие методы, которые могут изменить данные и иметь заголовки запросов, которые не являются CORS-FELISTED может сделать этот предварительный запрос. Это Параметры Запрос, используя три заголовка HTTP -запросов: Access-Control-Request-Method В Контроль доступа к заголовкам , Происхождение См. Это MDN статья Анкет

Это сообщение об ошибке, которое вы получите, если ваш бэкэнд не включен.

Исправить

Мы можем легко исправить это, отправив ответ Access-Control-Allow-Methods Заголовок со всеми разрешенными методами HTTP и статусом ответа 200 , при получении Параметры запрос. Итак, давайте добавим в наше промежуточное программное обеспечение.

app.use((req, res, next) => {
  if (req.method === "OPTIONS") {
    res.header("Access-Control-Allow-Methods", "PUT, POST, PATCH, DELETE, GET");
    return res.status(200).json({});
  }
  next();
});

Контроль доступа разрешить учетные данные также является заголовком, который должен присутствовать, когда ваше приложение отправляет запросы с такими учетными данными, как файлы cookie, то есть у вас есть с Credentials: True (в Axios) или Учетные данные: «Включить» (в выборке). Это сообщение, которое вы получаете после отсутствия этого заголовка и отправки учетных данных вместе с запросом.

Исправить

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

app.use((req, res, next) => {
  res.header("Access-Control-Allow-Credentials", true);
  next();
});

Если вы используете Express/Connect, то у вас есть готовый Node.js Cors Middleware Пакет, который делает это точное добавление заголовков для вас убедительным образом. Вы можете установить его с, NPM Установить Cors Анкет

Как сказано, что настройка так просто, если вам нужны только основные функции Cors, вы можете просто написать.

const cors = require("cors");
app.use(cors());

Это также настраивается, но конфигурация по умолчанию:

{
  "origin": "*",
  "methods": "GET,HEAD,PUT,PATCH,POST,DELETE",
  "preflightContinue": false,
  "optionsSuccessStatus": 204
}

Так что по умолчанию ваш:

  • Контроль доступа разрешить происхождение это *
  • Контроль доступа разрешить методы это Получить, голова, положить, патч, пост, УДАЛЯТЬ
  • Передайте ответ предварительного полета CORS следующему обработчику, false.

Вы можете настроить его в соответствии с потребностями ваших приложений, вот Список доступных параметров Анкет

Вот как я решил сделать для Мое приложение Анкет

const origin =
  process.env.NODE_ENV === "production"
    ? process.env.FRONTEND_PROD_URL
    : process.env.FRONTEND_LOCAL_URL;

// Setting up cors
app.use(
  cors({
    origin: origin,
    preflightContinue: true,
    methods: "GET,HEAD,PUT,PATCH,POST,DELETE",
    credentials: true,
  })
);

Ключ учетных данных устанавливает Access-Control-Allow-Credentials к истинному. Вы также можете сделать то же самое, добавив каждые заголовки, как мы обсуждали выше.

const origin =
  process.env.NODE_ENV === "production"
    ? process.env.FRONTEND_PROD_URL
    : process.env.FRONTEND_LOCAL_URL;

app.use((req, res, next) => {
  res.header("Access-Control-Allow-Origin", origin);
  res.header("Access-Control-Allow-Credentials", true);

  if (req.method === "OPTIONS") {
    res.header("Access-Control-Allow-Methods", "PUT, POST, PATCH, DELETE, GET");
    return res.status(200).json({});
  }
  next();
});

Это случилось со мной, я использовал только MSFT Edge в первую очередь и Firefox для тестирования, поэтому в обоих браузерах мое приложение работало фантастически. Но люди, которых я дал, чтобы проверить мое приложение, жаловались на получение ошибки CORS. Оказывается, все они использовали хром, который я еще не тестировал, поэтому я схватил Chrome и посмотрел на него, чья консоль все еще показала мне 2 -ю проблему Cors, которую мы исправили выше. Какого черта!

Затем, после того, как немного возилась с вкладкой Networks, небольшое предупреждение ⚠ Символ привлек мое внимание, которое, по словам Ховер, сказал,

A cookie associated with a cross-site resource at  was set without `SameSite` attribute. It has been blocked, as Chrome now delivers cookies with cross-site requests if they are set with `SameSite=none` and `Secure`.

Оказывается ранее в этом году (февраль 2020 г.) с Выпуск Chrome 80 Он имеет безопасную систему классификации cookie по умолчанию, которая нуждается в SameSite Атрибут на файлах cookie, чтобы быть доступным для браузера. Он имеет три значения, LAX, строго, нет И вы должны решить, какой из них должен использовать ваш файл cookie в зависимости от свободы, которую вы хотите дать.

После того, как он погуглил, эта статья Хероку подошла, Изменения Chrome могут сломать ваше приложение: подготовиться к обновлениям cookie SameSite что объяснило, зачем нам это нужно и как добавить этот атрибут.

Так что, как вы здесь, я скажу вам, как я исправил это.

Исправить

Я использовал один пакет Экспресс-сессия которое является простым промежуточным программным обеспечением для обработки создания сеанса и хранения в MongoDB с Connect-Mongo плагин. Вы можете настроить его аналогично пакету CORS для ваших приложений.

Итак, все, что мне нужно было сделать, это добавить SameSite атрибут к этому cookie настройки И это сработало отлично.

const session = require("express-session");

const sessionConfig = {
  // ... other methods
  cookie: {
    sameSite: "none",
  },
};

if (process.env.NODE_ENV === "production") {
  app.set("trust proxy", 1); // trust first proxy
  sessionConfig.cookie.secure = true; // serve secure cookies
}

app.use(session(sessionConfig));

Я позаботился о том, чтобы безопасная собственность должна быть Верно Только в производственной среде, что означает только происхождение с HTTPS может получить доступ к файлам cookie. И доверие прокси 1 который он доверяет первому прыгу с фронтального прокси-сервера. Чтобы узнать больше, обратитесь к Документы по доверительному прокси Анкет

CORS действительно важен и полезен для защиты ваших пользователей от CSRF атаки И аналогично новой обновленной политике по тем же атрибутам сайта от Google полезно. Хотя это может показаться разочаровывающим после постоянного получения этих ошибок в течение двух долгих дней (что я и сделал), в конце концов я узнал так много аспектов создания безопасного сервера и безопасной аутентификации, которая того стоила в конце концов.

Не стесняйтесь проверять проект, который я строю, который является Приложение для аутентификации Я сделал это, чтобы выучить местные и оаут -стратегии с использованием паспорта и сессий. Вы можете найти исходный код на моем GitHub Анкет

Оригинал: “https://dev.to/heytulsiprasad/top-5-cors-issues-you-don-t-want-to-run-into-16hi”

Читайте ещё по теме: