кредит: https://medium.com/@baphemot
Переведено с: https://medium.com/@baphemot/understanding-cors-18ad6b478e2b
"Э-э... хорошо, но недостаточно"
Если вы часто имеете дело с вызовами AJAX, то наверняка сталкивались со следующей ошибкой.
Если вы видите это сообщение, это означает, что не отвечает, но вы все еще можете в консоли на вкладке Network, см. Данные, возвращенные.
Итак, что это здесь?
Совместное использование ресурсов между источниками (CORS)
Поведение, которое вы испытываете, является реализацией браузера из разных источников.
Учитывая вопросы безопасности, до междоменной стандартизации, если вы хотите вызвать API узла в другом домене, его не существует. Такие вызовы будут заблокированы в соответствии с политикой единого источника.
Механизм CORS предназначен, во-первых, для того, чтобы запросы, которые вы делаете, представляли вас; во-вторых, чтобы блокировать запросы, сделанные мошенническим JS; в-третьих, этот механизм будет активироваться всякий раз, когда вы отправляете запрос на:
1) Разные доменные имена. (например, применяется вexample.com передача api.com)
2) Разные поддомены. (например, применяется вexample.comпередачаapi.com)
3). Разные порты. (например, применяется вexample.comпередачаexample.com:3001)
4) Различные протоколы. (например, применяется вexample.comпередачаexample.com)
С помощью этого механизма мы можем предотвратить атаки хакерских скриптов, которые подменяют вашу аутентификационную информацию при входе в систему, например на веб-сайте банка.
Если ваш браузер пытается начать запрос «не просто» (например, запрос содержит файлы cookie илиContent-type нетapplication/x-ww-form-urlencoded, multipart/form-data или text-plainПредполетная (предполетная)Механизмы, затем отправляетoptionsзапрос к серверу. Если ответ сервера не содержит определенных заголовков, последующий «простой»getилиpostЗапрос все равно будет отправлен, но браузер не позволит JS получить доступ к полученным данным.
Если вы явно хотите добавить файлы cookie, настраиваемые заголовки и некоторые другие функции, запрос больше не является «простым» запросом. Тогда сервер не ответит обоснованно и запрос не будет отправлен.
Доступ-Контроль-Разрешить-Что?
CORS использует очень мало заголовков HTTP-запросов (как в запросах, так и в ответах), но есть одна вещь, которую вы должны понимать и уметь применять на работе:
Access-Control-Allow-Origin
Этот заголовок запроса обычно возвращается сервером, и его значение показывает, к каким доменным именам у вас есть доступ. Его значение может быть:
-
*Разрешить доступ к любому домену - Доменное имя, подтвержденное безопасностью (например, .example.com)
Если вы попросите клиента передать некоторые заголовки для аутентификации, такие как файлы cookie, то выне можемУстановите значение Access-Control-Allow-Origin в*-Это должно быть доменное имя с подтвержденной безопасностью!
Access-Control-Allow-Credentials
Если сервер поддерживает аутентификацию с помощью файлов cookie, он должен включить этот заголовок в ответ.
True — это единственное допустимое значение.
Access-Control-Allow-Headers
Разделенный запятыми список заголовков, представляющих запросы, которые сервер готов поддерживать. (например, такие какx-authentication-token, вам нужно включить его в заголовок ACA и вернуть в вышеупомянутыйoptionsзапрос, иначе ваш запрос будет заблокирован)
Access-Control-Expose-Headers
Подобно приведенному выше, этот заголовок запроса содержит набор заголовков, доступных пользователю, которые появятся в фактическом ответе и будут доступны клиенту. Все остальные заголовки будут заблокированы.
Access-Control-Allow-Methods
Это относительно просто и сохраняет все типы HTTP-запросов, поддерживаемые сервером (например,get,post).
Origin
Часть заголовка клиентского запроса, значение которой содержит доменное имя, на котором запускается клиентское приложение. Из соображений безопасности браузеры не позволят вам переопределить это значение.
Как избавиться от ошибок «Кортов»
Вы должны признать, что CORS не является «ошибкой». Это предполагаемый механизм для защиты пользователя, вас и целевого веб-сайта, который вы запрашиваете.
Иногда отсутствие разумных заголовков запроса является неправильным поведением клиента (например, отсутствие информации для аутентификации, такой как ключ API).
expresscorsAccess-Control-Allow-Originзаголовок запроса.
Б - фронтенд разрабатываю, с бэкендом не знаком, временно нужно временное решение :)
Это второй лучший случай, потому что это случай А, только с некоторыми временными ограничениями. Если вы хотите временно обойти эту проблему, вы можете заставить свой браузер игнорировать механизм CORS, например, использовать подключаемый модуль ACAO Chrome или запускать следующие флаги при использовании Chome:
chrome --disable-web-security --user-data-dirважный:请记住这条命令会应用于所有网站，并且存在于整个浏览器会话中。 Используйте с осторожностью.
Другой способ: вы можете использоватьdevServer.proxy(при условии, что вы используете веб-пакет для обслуживания своего приложения) или используете решение CORS как услугу, напримерcors-anywhere.herokuapp.com/
C - Я разрабатываю интерфейс и хочу настроить сервер? не существует :`(
Хорошо, теперь все сложно. Во-первых, вам может потребоваться уточнить, почему не был отправлен правильный заголовок запроса?
Они не могут разрешить использование доступа стороннего приложения в библиотеку? Они могут применить только к использованию сторон сервера API, а не браузера? Вы не можете отправить проверку токена при запросе?
Adding a proxy in the middle
Имейте в виду, что этот подход может иметь риски для безопасности, если вы хотите поддерживать аутентификацию.
Подробнее о КОРС
Если вы хотите узнать больше о CORS, я рекомендую вам ознакомиться с более подробнымMDN article.