Ответ
- Проксирование запросов
Настроить прокси-сервер (например, через Nginx или Node.js), который будет перенаправлять запросы к API.
// Пример настройки прокси в vite.config.js
server: {
proxy: {
'/api': {
target: 'https://api.example.com',
changeOrigin: true,
rewrite: (path) => path.replace(/^/api/, '')
}
}
}- JSONP (устаревший, но работает для GET)
Использует тег<script>для обхода CORS, но только для GET-запросов.
function handleResponse(data) {
console.log(data);
}
const script = document.createElement('script');
script.src = 'https://api.example.com/data?callback=handleResponse';
document.body.appendChild(script);- CORS Anywhere (для разработки)
Публичные прокси (например,https://cors-anywhere.herokuapp.com/), но не для продакшена.
fetch('https://cors-anywhere.herokuapp.com/https://api.example.com')
.then(response => response.json())- Настройка заголовков на сервере
Если API под твоим контролем, добавь заголовки:
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, PUTВажно: Лучший способ — договориться с бэкендом о правильной настройке CORS. Остальные методы — временные или для разработки.
Ответ 18+ 🔞
Да ты посмотри, какие у нас тут проблемы с CORS вылезли, как будто кто-то специально палки в колёса вставляет! Ну ладно, слушай сюда, сейчас разберёмся, как эту хуйню обойти, чтобы твой фронтенд с бэкендом наконец подружились.
Первый способ — проксирование, как самый нормальный пацан.
Вот ты сидишь на локалхосте, а API где-то на другом конце света, и браузер орёт: «Низя!». Настраиваешь прокси, чтобы все запросы шли через твой дев-сервер, а он уже, хитрая жопа, подменяет заголовки и легально стучится к API. В vite.config.js делается элементарно:
server: {
proxy: {
'/api': {
target: 'https://api.example.com',
changeOrigin: true,
rewrite: (path) => path.replace(/^/api/, '')
}
}
}Теперь все запросы на /api летят куда надо, а браузер думает, что всё чисто. Красота, ебать мои старые костыли!
Второй способ — JSONP, древний, но для GET-запросов сработает.
Это как передать записку через друга в 90-е: используешь тег <script>, который по умолчанию CORS не боится. Но только для GET, и колбэками управлять — тот ещё геморрой.
function handleResponse(data) {
console.log(data);
}
const script = document.createElement('script');
script.src = 'https://api.example.com/data?callback=handleResponse';
document.body.appendChild(script);Работает, но чувствуешь себя полупидором, потому что это прошлый век, ёпта.
Третий способ — публичные прокси вроде CORS Anywhere.
Берёшь какой-нибудь https://cors-anywhere.herokuapp.com/, подставляешь перед своим URL и — охуенно! — запрос проходит. Но это строго для разработки, на продакшене так делать — это просто пиздец, потому что все твои данные пойдут через левый сервер, да и доверия к нему — ноль ебать.
fetch('https://cors-anywhere.herokuapp.com/https://api.example.com')
.then(response => response.json())Четвёртый и самый правильный способ — договориться с бэкендером.
Если API твоё или твой чувак на бэке адекватный, пусть добавит нужные заголовки, типа:
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, PUTВот тогда всё будет по-взрослому, без этих костылей и танцев с бубном.
Итог: если можешь повлиять на сервер — делай по-человечески, настрой CORS. Если нет — используй прокси в разработке, а на проде уже должен быть свой сервер, который эти запросы корректно обрабатывает. А всякие JSONP и публичные прокси — это для крайних случаев, когда терпения уже ноль ебать и нужно хоть что-то проверить.