Как устранить проблемы с cors

Причина: отсутствует заголовок CORS «Access-Control-Allow-Origin»

В ответе на CORS-запрос отсутствует заголовок Access-Control-Allow-Origin , используемый для проверки, может ли ресурс быть доступен для контента на текущем домене.

Если у вас есть доступ к серверу, то добавьте домен запрашивающего сайта в список разрешённых доменов, добавив его в значение заголовка Access-Control-Allow-Origin .

Например, для предоставления сайту https://amazing.site доступа к ресурсам с использованием CORS, заголовок должен выглядеть так:

Access-Control-Allow-Origin: https://amazing.site

Также вы можете разрешить доступ любому сайту, используя подстановку * . Используйте этот способ только для публичных API. В закрытых API * не должна использоваться, вместо этого должен быть установлен определённый домен или домены. При этом подстановка работает только для запросов с атрибутом crossorigin со значением anonymous .

Access-Control-Allow-Origin: *

Предупреждение: Внимание: Использование * для доступа к закрытым API — плохая идея по очевидным причинам.

Чтобы разрешить любому сайту делать CORS-запросы без использования подстановки * (например, для включения авторизационных данных), ваш сервер должен считывать значение заголовка Origin из запроса и использовать это значение, чтобы задать Access-Control-Allow-Origin , а также выставить заголовок Vary: Origin , чтобы обозначить динамическую установку заголовка в зависимости от источника.

Конкретная директива для установки заголовков зависит от вашего сервера. Так в Apache нужно добавить следующую строку в конфигурацию сервера (в соответствующих разделах , , или ). Конфигурация обычно находится в файле с расширением .conf (стандартные названия: httpd.conf , apache.conf ), либо в файле .htaccess .

Header set Access-Control-Allow-Origin 'origin-list'

В Nginx для установки этого заголовка используется команда:

add_header 'Access-Control-Allow-Origin' 'origin-list'

Смотрите также

Found a content problem with this page?

Edit the page on GitHub.
Report the content issue.
View the source on GitHub.

This page was last modified on 3 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

Проблемы с CORS?

Всем привет. Пишу проект на React + Node.js + Express.js + Самописная БД. Когда делаю запрос на «api/accounts/register» получаю вот эту ошибку: Access to fetch at ‘http://localhost:8200/api/accounts/sign’ from origin ‘http://localhost:3000’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled. Если ввести mode: «no-cors» на сервере получаю пустой body. Обработчик запроса на сервере:

app.post("/api/accounts/sign", parser, (request, response) => < console.log(request.body) let status = < ok: false, token: "" >; if (request.body.name.length > 0 & request.body.password.length > 0) < Requests.check(request.body, status, "accounts"); if (status.ok) < response.status(200).send(< ok: true, status: 200, message: "Authorization", token: status.token >); authorization = true; > else response.status(500).send(< ok: false, status: 500, message: "Data is not correct" >); >; >);

Fetch post Запрос на стороне клиента:

 function authorizationEnter() < async function inner() < let request = await fetch(`http://localhost:8200/api/accounts/sign`, < method: "POST", body: JSON.stringify(< name: authorizationBase.name, password: authorizationBase.password >), headers: < 'content-type': 'application/json;charset=utf-8', >>); let response = await request.json(); if (request.status == 200) < document.querySelectorAll(".sign_input").forEach(input =>input.classList.add("valid")); document.querySelectorAll(".sign_input").forEach(input => input.classList.remove("notValid")); window.location.href = "/news"; localStorage.setItem("TOKEN", response.token); > else < document.querySelectorAll(".sign_input").forEach(input =>input.classList.remove("valid")); document.querySelectorAll(".sign_input").forEach(input => input.classList.add("notValid")); >; >; inner(); >;

по поводу headers: «content-type»: «application/json;charset=utf-8», не работает в любом случае, хоть так хоть просто «application/json» Пожалуйста, нужна помощь. Всем спасибо.

Общие сведения о проблемах с механизмом CORS в прокси приложения Microsoft Entra и их решении

Совместное использование ресурсов между источниками (CORS) иногда может представлять проблемы для приложений и API, которые вы публикуете через прокси приложения Microsoft Entra. В этой статье рассматриваются проблемы и решения, связанные с прокси-сервером приложения Microsoft Entra.

Параметры безопасности веб-браузера обычно предотвращают отправку запросов AJAX с веб-страницы к другому домену. Такое ограничение называется политикой одного источника. Эта политика предотвращает чтение вредоносным сайтом конфиденциальных данных с другого сайта. Однако иногда может потребоваться разрешить другим сайтам вызывать ваш веб-API. CORS — это стандарт консорциума W3C, позволяющий серверу смягчить ограничения политики одного источника и выполнять некоторые запросы независимо от источника, а другие — отклонять.

Общие сведения проблемах с механизмом CORS и их решении

Два URL-адреса имеют одинаковый источник, если у них идентичные схемы, узлы и порты (RFC 6454). Например:

http://contoso.com/foo.html
http://contoso.com/bar.html

Указанные ниже URL-адреса имеют источники, отличные от предыдущих двух.

http://contoso.net — другой домен
http://contoso.com:9000/foo.html — другой порт
https://contoso.com/foo.html — другая схема
http://www.contoso.com/foo.html — другой поддомен

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

Вы можете выявить проблемы с CORS с помощью описанных ниже инструментов отладки в браузере.

Запустите браузер и перейдите к веб-приложению.
Нажмите клавишу F12, чтобы открыть консоль отладки.
Попробуйте возобновить транзакцию и просмотрите сообщение консоли. Нарушение CORS приводит к ошибке консоли в отношении источника.

На снимке экрана ниже показано, что при нажатии кнопки Try It появляется сообщение об ошибке CORS: источник https://corswebclient-contoso.msappproxy.net не найден в заголовке Access-Control-Allow-Origin.

CORS issue

Проблемы с CORS и Application Proxy

В следующем примере показан типичный сценарий прокси приложения Microsoft Entra CORS. На внутреннем сервере размещен контроллер веб-API CORSWebService, а также CORSWebClient, который вызывает CORSWebService. Запрос AJAX поступает от CORSWebClient к CORSWebService.

On-premises same-origin request

Приложение CORSWebClient работает при его размещении в локальной среде, но не загружается или возникает ошибка при публикации через прокси приложения Microsoft Entra. Если вы отдельно опубликовали CORSWebClient и CORSWebService через Application Proxy, то эти два приложения будут размещены в разных доменах. Запрос AJAX от CORSWebClient к CORSWebService будет являться запросом между разными источниками и завершится сбоем.

Application Proxy CORS request

Решения проблем с CORS и Application Proxy

Описанную выше проблему с CORS можно устранить несколькими способами.

Способ 1: настройка личного домена

Используйте личный домен прокси приложения Microsoft Entra для публикации из того же источника, не изменяя источники приложений, код или заголовки.

Способ 2: публикация родительского каталога

Опубликуйте родительский каталог обоих приложений. Это решение будет удобным, если на веб-сервере находятся только два приложения. Вместо публикации каждого приложения по отдельности можно опубликовать общий родительский каталог. В таком случае они будут иметь один и тот же источник.

В следующих примерах показана страница прокси-сервера приложения Microsoft Entra для приложения CORSWebClient. Если для параметра Внутренний URL-адрес задать значение contoso.com/CORSWebClient, то приложение не сможет выполнять успешные запросы к каталогу contoso.com/CORSWebService, так как они находятся в разных источниках.

Publish app individually

Вместо этого задайте Внутренний URL-адрес для публикации родительского каталога, который включает в себя каталоги CORSWebClient и CORSWebService.

Publish parent directory

Итоговые URL-адреса приложений позволят устранить проблему с CORS:

https://corswebclient-contoso.msappproxy.net/CORSWebService
https://corswebclient-contoso.msappproxy.net/CORSWebClient

Способ 3: обновление заголовков HTTP

Добавьте заголовок ответа HTTP в веб-службе, чтобы обеспечить соответствие для запроса к источнику. На веб-сайтах, работающих на базе служб IIS, используйте для изменения заголовка диспетчер IIS.

Add custom response header in IIS Manager

Это изменение не требует внесения изменений в код. Проверку можно выполнить с помощью трассировок Fiddler.

**Post the Header Addition**\ HTTP/1.1 200 OK\ Cache-Control: no-cache\ Pragma: no-cache\ Content-Type: text/plain; charset=utf-8\ Expires: -1\ Vary: Accept-Encoding\ Server: Microsoft-IIS/8.5 Microsoft-HTTPAPI/2.0\ **Access-Control-Allow-Origin: https\://corswebclient-contoso.msappproxy.net**\ X-AspNet-Version: 4.0.30319\ X-Powered-By: ASP.NET\ Content-Length: 17

Способ 4: изменение приложения

Вы можете изменить приложение для поддержки CORS, добавив заголовок Access-Control-Allow-Origin с соответствующими значениями. Способ добавления заголовка зависит от языка кода, с помощью которого создано приложение. Изменение кода требует больших усилий, поэтому мы рекомендуем использовать этот способ в последнюю очередь.

Способ 5: продление времени существования маркера доступа

Некоторые проблемы с CORS невозможно решить. Например, если приложение перенаправляется на сайт login.microsoftonline.com для проверки подлинности и срок действия маркера доступа истекает. Затем вызов CORS завершается ошибкой. Обходной путь для этого сценария — продлить время существования маркера доступа, чтобы предотвратить истечение срока его действия во время сеанса пользователя. Дополнительные сведения о том, как это сделать, см. в разделе о времени существования настраиваемых маркеров в идентификаторе Microsoft Entra.

См. также

Руководство по добавлению локального приложения для удаленного доступа через Application Proxy в Microsoft Entra ID
Планирование развертывания прокси приложения Microsoft Entra
Удаленный доступ к локальным приложениям с помощью прокси приложения Microsoft Entra

Как решить проблему с блокировкой CORS?

Изучаю react/node по курсу udemy. Локально все работает нормально, но после деплоя при попытке Login with Google, консоль выдает ошибку:

Failed to load resource: the server responded with a status of 503 (Service Unavailable)

Access to fetch at ‘https://geostickers.herokuapp.com/graphql’ from origin ‘https://geoapp-pvfinzglt.now.sh’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

Error logging in TypeError: Failed to fetch

Ошибку можно сгенерировать на клиенте https://geoapp-pvfinzglt.now.sh

const server = new ApolloServer(< typeDefs, resolvers, //cors: true, - не решает проблему context: async (< req >) => < let authToken = null; let currentUser = null; try < authToken = req.headers.authorization if(authToken) < currentUser = await findOrCreateUser(authToken); >> catch(err) < console.error(`Unable to authenticate user with token $`) > return < currentUser >> >); server.listen(< port: process.env.PORT || 4000 >).then((< url >) => < console.log(`Server listening on $`) >);

Вопрос задан более трёх лет назад
27676 просмотров

1 комментарий

Средний 1 комментарий