Proxy для виджета

Настройка proxy позволяет направлять все запросы виджета через ваш собственный домен. Это решает две проблемы:

  • Блокировщики рекламы не блокируют запросы к вашему домену
  • CORS — запросы идут на тот же origin, что и сайт

Как это работает

По умолчанию виджет обращается напрямую к серверам api.apx.chat и widget.apx.chat. При включённом proxy все запросы (REST API, WebSocket, статика) идут через ваш домен, а ваш сервер проксирует их на наши серверы.

TEXT
Браузер → yourdomain.com/chat-api → api.apx.chat
Браузер → yourdomain.com/chat-widget → widget.apx.chat

Инициализация виджета с proxy

Передайте параметры proxyApiUrl и proxyWidgetUrl третьим аргументом в init:

HTML
<script>
  (function (d, t, l) {
    var CLIENT = l.getItem('apx_chat_client_id');
    var TOKEN = "ВАШ_ТОКЕН";
    var BASE_URL = "https://api.apx.chat/static/widget.js";
    var g = d.createElement(t), s = d.getElementsByTagName(t)[0];
    g.src = BASE_URL;
    g.defer = true;
    g.async = true;
    s.parentNode.insertBefore(g, s);
    g.onload = function () {
      window.apxChat.init(TOKEN, CLIENT, {
        proxyApiUrl: 'https://yourdomain.com/chat-api',
        proxyWidgetUrl: 'https://yourdomain.com/chat-widget'
      });
    };
  })(document, "script", localStorage);
</script>

Параметры

ПараметрТипОписание
proxyApiUrlstringURL прокси для API-сервера (api.apx.chat). Подменяет MAIN_URL, API_URL и SOCKET_URL
proxyWidgetUrlstringURL прокси для Widget-сервера (widget.apx.chat). Подменяет WIDGET_URL

Что подменяется

Исходный URLПри proxyПример
MAIN_URL (https://api.apx.chat)proxyApiUrlhttps://yourdomain.com/chat-api
API_URL (https://api.apx.chat/api)proxyApiUrl + /apihttps://yourdomain.com/chat-api/api
SOCKET_URL (wss://api.apx.chat)proxyApiUrl (ws/wss)wss://yourdomain.com/chat-api
WIDGET_URL (https://widget.apx.chat/api)proxyWidgetUrl + /apihttps://yourdomain.com/chat-widget/api

Настройка Nginx

Добавьте два location блока в конфигурацию вашего сайта:

NGINX
# Прокси для API сервера (api.apx.chat)
location /chat-api/ {
    proxy_pass https://api.apx.chat/;
    proxy_set_header Host api.apx.chat;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;

    # WebSocket поддержка (для чата)
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_read_timeout 86400;
}

# Прокси для Widget сервера (widget.apx.chat)
location /chat-widget/ {
    proxy_pass https://widget.apx.chat/;
    proxy_set_header Host widget.apx.chat;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
}

Настройка Cloudflare Worker

Если вы используете Cloudflare, можно создать Worker:

JS
export default {
  async fetch(request) {
    const url = new URL(request.url);

    let target;
    if (url.pathname.startsWith('/chat-api/')) {
      url.pathname = url.pathname.replace('/chat-api/', '/');
      target = 'https://api.apx.chat';
    } else if (url.pathname.startsWith('/chat-widget/')) {
      url.pathname = url.pathname.replace('/chat-widget/', '/');
      target = 'https://widget.apx.chat';
    } else {
      return new Response('Not found', { status: 404 });
    }

    const newUrl = target + url.pathname + url.search;

    // Поддержка WebSocket
    if (request.headers.get('Upgrade') === 'websocket') {
      return fetch(newUrl, request);
    }

    return fetch(newUrl, {
      method: request.method,
      headers: request.headers,
      body: request.body,
    });
  }
};

Проверка работы

После настройки proxy откройте DevTools (F12) → Network и убедитесь, что:

  1. Все запросы виджета идут через ваш домен (yourdomain.com/chat-api/...)
  2. WebSocket-соединение устанавливается через wss://yourdomain.com/chat-api/socket.io/...
  3. Ответы приходят со статусом 200