Как исправить ошибку CORS Origin в Javascript

Cross-Origin Resource Sharing (CORS) — это механизм безопасности, реализованный в веб-браузерах для ограничения совместного использования ресурсов между разными доменами. Хотя CORS играет важную роль в веб-безопасности, он также может вызвать проблемы, когда вы пытаетесь получить доступ к ресурсам из другого домена через JavaScript.

Первоисточник этой статьи можно найти в Axxellanceblog

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

Это пример ошибки CORS:

Что такое КОРС

Cross-Origin Resource Sharing (CORS) — это функция безопасности, реализованная в веб-браузерах для защиты от межсайтовых атак путем ограничения совместного использования ресурсов между разными доменами. В этом сообщении блога мы рассмотрим, что такое CORS и почему это важно понимать, особенно для веб-разработчиков.

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

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

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

3 способа исправить ошибку CORS в веб-браузере

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

Исправлено: установка расширения для браузера

Вы можете успешно обойти ошибку источника CORS локально, установив расширение в локальном браузере под названием Расширение CORS Moesif. Установка расширения CORS Moesif — самое быстрое решение. Щелчок по нему в браузере после установки активирует расширение. Убедитесь, что метка значка изменилась с выключено на включено. Затем обновите свое приложение, и теперь ваши запросы к API должны работать🎉.

Тем не менее, исправление плагина вводит в заблуждение.

Почему!!! Вы можете спросить: Ну, плагин, несомненно, решает проблему. Это исправление работает только на вашей машине. Вполне нормально иметь установленный плагин, который может помочь вам обойти проблему при работе над локальной разработкой.

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

Должны быть лучшие варианты. Чтобы добраться туда, давайте проверим следующие два исправления.

Исправлено два: отправить запрос на прокси-сервер

Вы не можете требовать, чтобы ваши пользователи установили плагин, который применяет заголовок во внешнем интерфейсе, чтобы обмануть их браузеры. Тем не менее, у вас есть контроль над внутренним URL-адресом, который получает запросы API от веб-приложений.

Сервер cors-anywhere выступает в роли прокси, вставляя в запросы CORS-заголовки. Прокси служит посредником между клиентом и сервером. Прокси-сервер Cors-Anywhere действует здесь как посредник между интерфейсным веб-приложением, отправляющим запрос, и сервером, предоставляющим данные. Подобно плагину Allow-control-allow-origin, он добавляет к ответу более открытый заголовок Access-Control-Allow-Origin: *.

Это работает так. Скажем, ваш интерфейс пытается сделать запрос GET для:

https://joke-api-strict-cors.appspot.com/jokes/random

Но для этого API не задано значение Access-Control-Allow-Origin, которое позволило бы домену веб-приложения получить к нему доступ. Поэтому вместо этого отправьте запрос GET по адресу:

https://cors-anywhere.herokuapp.com/<https://joke-api-strict-cors.appspot.com/jokes/random>

Прокси-сервер получает https://joke-api-strict-cors.appspot.com/jokes/random по указанному выше URL-адресу. Затем он отправляет запрос на этот сервер для получения ответа. Наконец, прокси обновляет исходный ответ заголовком Access-Control-Allow-Origin: *.

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

Единственным недостатком прокси-сервера Cors-Anywhere является то, что для получения ответа часто требуется некоторое время. Ваши приложения могут работать немного медленнее из-за высокой задержки.

Это подводит нас к окончательному, еще лучшему подходу.

Исправлено три: создайте собственный прокси-сервер

Решение, которое я предлагаю в таких случаях, — создать свой собственный прокси! Как и в последнем методе, вы используете тот факт, что связь между серверами не требует применения одной и той же политики происхождения. Вы также заботитесь о проблеме задержки. Вы можете выделить столько ресурсов, сколько вам нужно, для ваших собственных серверов, и вам не нужно совместно использовать прокси-сервер CORS с другими пользователями.

Вот простой код Node.js, который создает прокси-сервер для того же https://joke-api-strict-cors.appspot.com/, что и выше, используя экспресс-веб-фреймворк:

const express = require('express');
const request = require('request');

const app = express();
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  next();
});

app.get('/jokes/random', (req, res) => {
  request(
    { url: '<https://joke-api-strict-cors.appspot.com/jokes/random>' },
    (error, response, body) => {
      if (error || response.statusCode !== 200) {
        return res.status(500).json({ type: 'error', message: err.message });
      }

      res.json(JSON.parse(body));
    }
  )
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => console.log(`listening on ${PORT}`));