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

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

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

Проблема 1:

Ответ на предпечатный запрос не проходит проверку контроля доступа: значение заголовка Access-Control-Allow-Origin в ответе не должно быть подстановочным знаком *, если в запросе используется режим учетных данных включить. Следовательно, к источнику http: // localhost: 4200 не разрешен доступ.

Решение 1.

У вас не должно быть «Access-Control-Allow-Origin»: «*»

Вместо этого используйте специальный набор «Access-Control-Allow-Origin».

Access-Control-Allow-Origin: http: // localhost: 4200 »

Explanation: Эта проблема по существу указывает на то, что Angular устанавливает withCredentials как true; и пытается отправить учетные данные или файлы cookie вместе с запросом. В этом случае использование подстановочного знака в заголовке «Access-Control-Allow-Origin» запрещено.

Проблема 2:

Ответ на предпечатный запрос не проходит проверку контроля доступа: значение заголовка Access-Control-Allow-Credentials в ответе равно , что должно быть« истина , если режим учетных данных запроса - включить . Следовательно, к источнику ‘ http: // localhost: 4200 ’ не разрешен доступ. Режим учетных данных запросов, инициированных XMLHttpRequest, контролируется атрибутом withCredentials.

Решение 2:

Помимо добавления конкретного разрешенного источника вместо *, вам потребуется добавить Allow-Credentials.

Access-Control-Allow-Origin: http: // localhost: 4200 »

«Access-Control-Allow-Credentials»: «true», // нужно добавить это дополнительное

Explanation: Если вы установили xhr.credential = true (это единственное допустимое значение), вам необходимо установить для параметра Access-Control-Allow-Credentials значение true. (исх. MDN)

Проблема 3:

На запрошенном ресурсе нет заголовка Access-Control-Allow-Origin. Следовательно, к источнику ‘ http: // localhost: 4200 ’ не разрешен доступ.

Решение 3:

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

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

В качестве примера:

Access-Control-Allow-Origin: http://test.com
Access-Control-Allow-Methods: POST, GET
Access-Control-Allow-Headers: X-NEW-ONE, Content-Type
Access-Control-Max-Age: 86400

Возможно, вам нужно будет убедиться, что ответ вашего сервера правильно отправляет «Access-Control-Allow-Methods» и «Access-Control-Allow-Headers».

В большинстве случаев, чтобы решить эту проблему, вам необходимо понимать, что любые другие заголовки запросов, кроме тех, которые указаны в безопасном списке CORS, включая ACCEPT, ACCEPT-LANGUAGE, CONTENT-LANGUAGE, CONTENT-TYPE, должны быть включены в список « Access-Control-Allow-Headers »возвращается как часть ответа на вызов OPTIONS.

Любые предложения по улучшению этого поста приветствуются!