В настоящее время стало практически невозможно напрямую запросить другой веб-сайт с вашего веб-сайта. Из-за некоторых правил безопасности вы можете столкнуться со следующими известными CORS ошибками:
Access to fetch at ‘<websiteB>' from origin ‘<websiteA>' 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.
Во всех наших примерах мы попытаемся запросить https://www.semrush.com/ с нашего веб-сайта, используя эту одну строку Javascript:
fetch('https://www.semrush.com/').then(d => d.text()).then(d => console.log(d))
В этом примере мы видим, что SEMrush не разрешает CORS со случайных веб-сайтов.
Чтобы обойти эту проблему, нам нужен прокси-сервер. Хорошей новостью является то, что некоторые люди уже работали над этой проблемой и выпустили свой сервер онлайн, поэтому нам не нужно создавать свой собственный! Некоторые из них бесплатны для использования, некоторые являются условно-бесплатными. В этой статье я покажу 1 строку кода, как их использовать 💪
Бесплатный прокси-сервер
Бесплатные прокси-серверы не рекомендуются для производственных целей, поскольку мы не можем гарантировать их стабильность. Поэтому ваши клиенты могут столкнуться с некоторыми перебоями и проблемами. Используйте их только для экспериментов!
Corsproxy.Github.io
https://corsproxy.github.io/ — один из таких бесплатных прокси-серверов, который позволит вам протестировать некоторые запросы во время разработки (повторяю, используйте его только для экспериментов).
Итак, как его использовать? Довольно просто, объедините веб-сайт, который вы хотите удалить, следующим образом: https://crossorigin.me/‹websiteToRequest›
fetch(‘https://crossorigin.me/https://www.semrush.com/').then(d => d.text()).then(d => console.log(d))
Тада! 🎉 Мы видим, что благодаря этому прокси-серверу мы смогли обойти нашу проблему с CORS.
Плюсы
- Это бесплатно для использования и быстро протестировано.
- Код сервера доступен на Github https://github.com/connorhudson/crossorigin.me
Минусы
- Это не стабильно (может перестать работать завтра)
- Вы можете делать только запросы GET. Другие методы HTTP, такие как POST, PUT, не поддерживаются.
Прокси-сервер Freemium
Эти прокси-серверы могут быть дорогими, но сэкономят вам много времени, поэтому я бы сказал, что в зависимости от потребностей вашего бизнеса они могут быть действительно оправданы! Хотя бы выстрелить.
Скраперапи
https://www.scraperapi.com/ — один из лучших API парсеров, которые вы можете найти в Google. Они сосредоточили свою работу на оптимизации каждого запроса, который они пересылают, чтобы ответы были очень быстрыми, и они даже могли обрабатывать CAPTCHA. Кроме того, вы также можете использовать этот прокси-сервер для экспериментов, потому что после регистрации они предложат вам 1000 бесплатных вызовов API.
Давайте посмотрим, как вы можете использовать его для запроса/удаления SEMrush в 1 строке кода:
fetch(‘https://api.scraperapi.com?api_key=<API_KEY>&url=https://www.semrush.com/').then(d => d.text()).then(d => console.log(d))
Тада! 🎉 Здесь тот же результат, благодаря Scraperapi мы смогли выполнить наш запрос CORS, используя одну строку Javascript! Формат запроса GET довольно прост: https://api.scraperapi.com?api_key=‹API_KEY›&url=‹websiteToRequest›
Плюсы:
- Быстро и безопасно для использования в рабочей среде (гарантия стабильности 99 %).
- Вы можете выполнять запросы GET, POST и PUT.
Минусы:
- После 1000 бесплатных звонков вам нужно будет подписаться на один из их планов.
Если вам интересно, проверьте их документацию здесь https://www.scraperapi.com/documentation.
Вывод
Вы можете вызывать любые веб-сайты непосредственно из своего Javascript-клиента и обходить CORS благодаря прокси-серверам. Вам даже не нужно создавать свой собственный сервер, потому что некоторые люди уже сделали эту работу за вас! Одна строка кода, и вы готовы к утилизации!
