Введение
При разработке веб-приложений на JavaScript, вы можете столкнуться с ошибкой “No ‘Access-Control-Allow-Origin’ header is present on the requested resource”. Эта ошибка возникает, когда ваш код пытается обратиться к ресурсу на другом домене, который не предоставляет необходимые заголовки для обеспечения безопасности. Интересно то, что Postman, инструмент для тестирования API, может успешно обращаться к этим ресурсам без ошибок. В этой статье мы рассмотрим, почему это происходит и как можно решить эту проблему.
1. Что такое “No ‘Access-Control-Allow-Origin’ header is present on the requested resource”?
Когда ваш JavaScript код выполняет AJAX-запрос к ресурсу на другом домене, браузер применяет политику безопасности, известную как “Same-Origin Policy” (Политика одного источника). Эта политика предотвращает доступ к ресурсам на других доменах, чтобы предотвратить злоумышленников от выполнения вредоносного кода на вашем веб-сайте. Браузер отправляет предзапрос (pre-flight request) на сервер, чтобы узнать, разрешен ли доступ к ресурсу для вашего кода.
Если сервер не возвращает заголовок “Access-Control-Allow-Origin” с доменом, с которого происходит запрос, то браузер блокирует доступ к ресурсу и вы получаете ошибку “No ‘Access-Control-Allow-Origin’ header is present on the requested resource”.
2. Почему Postman не получает эту ошибку?
Postman – это инструмент для тестирования API, который работает вне контекста браузера. Он не применяет политику безопасности “Same-Origin Policy” и может свободно обращаться к ресурсам на других доменах. Поэтому, когда вы используете Postman для выполнения запросов к серверу, вы не получаете ошибку “No ‘Access-Control-Allow-Origin’ header is present on the requested resource”.
3. Как решить проблему?
Существуют несколько способов решения проблемы с ошибкой “No ‘Access-Control-Allow-Origin’ header is present on the requested resource”. Давайте рассмотрим некоторые из них:
3.1. Использование прокси-сервера
Один из способов обойти политику безопасности и получить доступ к ресурсу на другом домене – это использовать прокси-сервер. Прокси-сервер находится на вашем домене и перенаправляет запросы к ресурсу на другом домене. Таким образом, ваш JavaScript код обращается к прокси-серверу на том же домене, что и ваш веб-сайт, и не получает ошибку “No ‘Access-Control-Allow-Origin’ header is present on the requested resource”.
// Пример использования прокси-сервера
const proxyUrl = 'https://example.com/proxy/';
const apiUrl = 'https://api.example.com/data';
fetch(proxyUrl + apiUrl)
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.log(error));
3.2. Настройка сервера для CORS
Еще один способ решить проблему – настроить сервер для CORS (Cross-Origin Resource Sharing, совместное использование ресурсов между разными источниками). Вы можете настроить сервер таким образом, чтобы он возвращал заголовок “Access-Control-Allow-Origin” со значением домена, с которого происходит запрос. Это позволит вашему JavaScript коду получить доступ к ресурсу на другом домене без ошибки.
// Пример настройки сервера для CORS
app.use(function(req, res, next) {
res.setHeader('Access-Control-Allow-Origin', 'https://example.com');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
next();
});
3.3. Использование JSONP
Еще один способ обойти политику безопасности – использовать JSONP (JSON with Padding, JSON с обрамлением). JSONP позволяет получать данные с других доменов, обернув ответ в функцию обратного вызова. Таким образом, ваш JavaScript код может получить данные с другого домена, используя тег <script>.
// Пример использования JSONP
function handleData(data) {
console.log(data);
}
const script = document.createElement('script');
script.src = 'https://api.example.com/data?callback=handleData';
document.body.appendChild(script);
Заключение
Ошибку “No ‘Access-Control-Allow-Origin’ header is present on the requested resource” можно решить, используя прокси-сервер, настройку сервера для CORS или JSONP. Каждый из этих методов имеет свои преимущества и недостатки, и выбор зависит от ваших потребностей и возможностей.
Надеюсь, эта статья помогла вам понять, почему ваш JavaScript код получает ошибку “No ‘Access-Control-Allow-Origin’ header is present on the requested resource”, в то время как Postman нет, и как можно решить эту проблему. Удачи вам в разработке веб-приложений!
