Иногда вашему приложению Electron необходимо обойти CORS. Единственная причина, по которой я даже использовал Electron в своем недавнем приложении для чтения RSS, заключалась в том, чтобы обойти CORS. Вы также можете следовать этому руководству, чтобы внедрить его в свой собственный проект.
Зачем обходить CORS?
Время историй. Итак, недавно я разрабатывал приложение для чтения RSS. Теперь приложение было написано исключительно на React и его предполагалось развернуть как веб-сайт GitHub.io, куда можно было добавлять интересующие вас ленты и читать статьи.
Теперь CORS хорош, и есть веские причины для его внедрения, но иногда такие технологии, как CORS, просто мешают.
Мое развертывание могло произойти двумя способами
- Попросить пользователя отключить безопасность на основе браузера, что приведет к тому, что никто не будет использовать мой сайт (включая меня)
- Используйте Электрон
Хотя у этого варианта тоже есть недостатки, по крайней мере, если вы поделитесь им с Электроном, даже ваш покорный слуга будет использовать свое собственное приложение.
Плохой, но популярный способ обойти CORS
Использование webSecurity: false как способ отключить эту функцию в Electron.
Хотя он обходит CORS, он также как бы открывает ящик Пандоры, которого лучше избегать.
Первоначально я использовал этот подход в период разработки, когда я был менее осведомлен и гораздо новичок в среде Electron, после чего я переключился на немного более безопасный подход, упомянутый ниже.
Как обойти CORS?
Обойти CORS очень просто
Допустим, у вас есть BrowserWindow по имени win
В этом случае все, что вам нужно сделать, это скопировать и вставить следующий код
Эт альт
Теперь вы знаете, как использовать Electron для обхода CORS для вашего следующего приложения.
Как это работает?
Давайте представим, что мы используем наш обычный браузер Firefox или Chrome для этого веб-приложения. Таким образом, запрос будет работать следующим образом: мы делаем запрос из нашего домена в интересующий домен (допустим, ESPNCricInfo). Сначала мы делаем запрос к ESPNCricInfo.
ESPNCricInfo теперь обрабатывает наш запрос и отправляет ответ в браузер
Затем браузер проверяет, указан ли наш домен в списке Access-Control-Allow-Origin. Если это не так, как видно ответ блокируется от доступа к нам.
Подожди секунду. Я знаю, как обойти CORS
Что, если мы заставим ESPNCricInfo распознавать наш веб-сайт?
Как будто это когда-нибудь произойдет (для меня).
Что, если мы перед тем, как браузер проверит Access-Control-Allow-Origin, мы изменим его, чтобы браузер почувствовал, что ESPNCricInfo сказал нам «да». Это сработает?
Да-а-а!
И, как видно, мы используем onHeadersReceived именно для этой цели. В этой функции мы заменяем заголовок Access-Control-Allow-Origin, отправленный ESPNCricInfo, нашим собственным. Таким образом мы обошли CORS
Обход CORS для заголовков
- Допустим, вы хотите использовать свои собственные заголовки.
- Но сервер еще не сказал «да» этим заголовкам для целей CORS.
- Например, ESPNCricInfo не разрешает мое тестовое поле «привет»
- Но допустим, вы знаете, что их CORS неверен, и все равно хотите отправить заголовок.
- Поэтому нам нужно исправить Access-Control-Allow-Headers.
И готово!!
Они используют разные падежи, мистер Бин.
Вместо «Access-Control-Allow-Origin» они используют «access-control-allow-origin».
Ааа браузеры. Почему они такие любезные?
Конечно, это можно исправить.
- Определите наш ключ интереса
- Нижний регистр это
- Посмотрите на все строчные клавиши, пока мы не найдем нашу
- Замени это
- Завершить цикл
- Если 3 никогда не было правдой, вставьте новый ключ
Новый обход CORS
Нужно ли нам настраивать Fetch для этого?
No no no no
Самое приятное то, что нет необходимости настраивать Fetch. Не нужно менять ни строчки существующего кода.
Следующий код продолжает работать с Electron
Совместимость с TypeScript
Да, действительно, этот код действительно совместим с TypeScript.
Кредиты
- Джеролд Уилсон. Как вы работаете с CORS в электронном приложении? — Stack Overflow
Ответ здесь формирует основу, но неверен для нашего варианта использования, который заключается в обходе CORS для всех веб-сайтов. Кроме того, наш код обрабатывает ошибку, упомянутую serg06. - спасибо за упоминание о необходимости поддерживать обход заголовков CORS
Как вы обошли CORS?
Вы можете сообщить мне либо через комментарии, либо через LinkedIn, если у вас нет аккаунта Medium
