Проблема (на самом деле не проблема, но это сценарий)

Если вы используете Angular или jQuery или, возможно, запрос XHR, то вы говорите определенному серверу: «Привет, сервер, это запрос POST / GET, и это мои ПАРАМЕТРЫ, вы мне ответите?» Но, к сожалению, ваш веб-браузер возвращает в консоли что-то вроде этого: «Эй, ты не можешь этого сделать, потому что»:

На запрошенном ресурсе нет заголовка «Access-Control-Allow-Origin». Следовательно, к источнику "null" доступ не разрешен.

В тот момент вы скажете! "О нет! Но почему ?? ПОЧЕМУ !!" вы все сделали правильно, все ваши параметры и заголовки установлены, но у вас все еще есть та же проблема. Вы гуглите и находите некоторые решения или обходные пути, чтобы справиться с этим. Но что такое CORS?

Прежде всего вам нужно знать…

Что такое политика безопасности?

В бизнесе политика безопасности - это документ, в котором в письменной форме указывается, как компания планирует защитить свои физические и информационные активы (ИТ). Политику безопасности часто считают «живым документом», что означает, что документ никогда не заканчивается, а постоянно обновляется по мере изменения технологий и требований сотрудников.

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

Что такое CORS?

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

Пример запроса из разных источников: HTML-страница, обслуживаемая с http://domain-a.com, делает запрос ‹img› src для http://domain-b.com/image.jpg. Многие страницы в Интернете сегодня загружают ресурсы, такие как таблицы стилей CSS, изображения и сценарии, из отдельных доменов, таких как сети доставки контента (CDN).

Почему ваши запросы работают в некоторых приложениях, таких как POSTMAN, а не в вашем браузере?

POSTMAN - это инструмент для разработчиков, а не браузер.

Каковы преимущества использования CORS?

Стандарт CORS необходим, потому что он позволяет серверам указывать не только, кто может получить доступ к своим активам, но также и то, как они могут быть доступны.

Запросы между источниками выполняются с использованием стандартных методов HTTP-запроса. Большинство серверов разрешают запросы GET, что означает, что они позволяют ресурсам из внешних источников (например, веб-страницы) читать свои ресурсы. Однако методы HTTP-запросов, такие как PATCH, PUT или DELETE, могут быть отклонены для предотвращения злонамеренного поведения. Для многих серверов это сделано намеренно. Например, вполне вероятно, что сервер A не хочет, чтобы серверы B, C или D редактировали или удаляли его активы.

С помощью CORS сервер может указать, кто может получить доступ к его ресурсам и какие методы HTTP-запроса разрешены из внешних ресурсов.

Каково решение ?

Самое простое решение - сказать серверу: «Выполняйте и обслуживайте запросы из этих источников!» 😆

На APACHE:

Access-Control-Allow-Origin: http://www.example.com

Контроль доступа Разрешить Origin с подстановочным знаком, разрешающим все домены:

Доступ-Контроль-Разрешить-Происхождение: *

НО ОСТЕРЕГАЙТЕСЬ

Политика одинакового происхождения с подстановочными знаками уместна, когда страница или ответ API считаются полностью общедоступным контентом и предназначены для доступа всем, включая любой код на любом сайте. Например, бесплатный веб-шрифт на публичном хостинге вроде Google Fonts.

Есть ли обходной путь или быстрое решение для режима разработки?

Да, НО не рекомендуется, используйте на свой страх и риск.

  • Мы можем подделать (подделать) заголовок «Origin» при запросе - примерно так:
xhr.setRequestHeader("Origin", 'www.exemple.com');
  • Используйте расширение браузера в Chrome или Firefox.
  • Отключите безопасность в браузере:

На хроме или хроме

Примечание. Удалите все экземпляры Chrome перед запуском команды

chromium-browser --disable-web-security --user-data-dir

При первом открытии браузер предупредит вас, что вы используете неподдерживаемую командную строку, которую вы можете проигнорировать.

  • Вы можете установить прокси!

В angular2 + вы можете изменить запросы на «/ api», например, и создать прокси, который перенаправляет «/ api / *» на конкретный URL.

Чтобы настроить его, нам нужно создать файл proxy.conf.json в корне нашего проекта Angular CLI. Контент должен выглядеть следующим образом

{
"/api/*": {
"target": "http://localhost:3000",
"secure": false,
"logLevel": "debug",
"changeOrigin": true
}
}

или вы можете использовать плагин, например этот:



Rob - W / cors -where
cors-Anywhere - CORS Anywhere - это обратный прокси-сервер NodeJS, который добавляет заголовки CORS к проксируемому запросу. github.com



Заключение

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

Front-end разработчики могут использовать некоторые обходные пути для целей разработки.