1. JSONP (JSON с заполнением):

Один из старейших способов обойти политику одного и того же происхождения — использование JSONP. Он включает в себя внедрение тега сценария в DOM, который запускает функцию обратного вызова, обрабатывающую ответ от сервера. Вот пример:

function handleResponse(data) {
  // Process the response
}
var script = document.createElement('script');
script.src = 'https://example.com/api?callback=handleResponse';
document.body.appendChild(script);

2. CORS (совместное использование ресурсов между источниками):

CORS — это механизм, позволяющий серверам указывать, каким источникам разрешен доступ к их ресурсам. Сервер должен включить в свой ответ соответствующие заголовки CORS. Вот как вы можете сделать запрос CORS, используя XMLHttpRequest:

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data');
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var response = JSON.parse(xhr.responseText);
    // Process the response
  }
};
xhr.send();

3. API получения:

Появившийся в современных браузерах API Fetch предоставляет более мощный и гибкий способ выполнения запросов между источниками. Вот пример:

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    // Process the data
  })
  .catch(error => {
    // Handle the error
  });

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

Если целевой сервер не поддерживает CORS, вы можете настроить прокси-сервер для пересылки запросов. Прокси-сервер действует как посредник, получая данные с удаленного сервера и отправляя их обратно в ваше приложение. Вот упрощенный пример использования Node.js и Express:

const express = require('express');
const request = require('request');
const app = express();
app.get('/data', (req, res) => {
  const url = 'https://api.example.com/data';
  req.pipe(request(url)).pipe(res);
});
app.listen(3000, () => {
  console.log('Proxy server listening on port 3000');
});

5. Прокси-сервер для совместного использования ресурсов между источниками (CORS):

Другой подход — использование прокси-службы CORS. Эти сервисы действуют как посредники и добавляют в ответ сервера необходимые заголовки CORS. Вот пример использования crossorigin.me:

fetch('https://crossorigin.me/https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    // Process the data
  })
  .catch(error => {
    // Handle the error
  });

6. Изменение ответа сервера:

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

7. Расширения Chrome:

В целях разработки вы можете использовать расширения браузера, такие как «Разрешить CORS: Access-Control-Allow-Origin», чтобы временно отключить политику одного и того же происхождения. Однако не забудьте отключить эти расширения перед развертыванием приложения.

8. Обратный прокси-сервер:

Настройка обратного прокси-сервера может помочь преодолеть ограничения между источниками. Обратный прокси-сервер находится между вашим клиентским приложением и целевым сервером, пересылая запросы от имени клиента. Для настройки обратных прокси-серверов можно использовать такие инструменты, как Nginx и Apache.

<ол старт="9">

WebSocket:

Если вам необходимо установить постоянное соединение между клиентом и сервером, WebSocket — отличный выбор. Соединения WebSocket не ограничиваются политикой одного и того же происхождения, что позволяет обмениваться данными между различными доменами в режиме реального времени.

10. Серверные решения:

В некоторых случаях может быть более целесообразным выполнять запросы между источниками из кода на стороне сервера, а не на стороне клиента. Серверные платформы, такие как Node.js, предоставляют встроенные модули или библиотеки для обработки HTTP-запросов, что упрощает обход политики одного и того же происхождения.