# Route API calls through your domain

Configure a proxy to serve SDK requests from your own domain.

Ad blockers filter requests by matching URLs against known third-party domains. By routing SDK traffic through your own domain, requests are treated as first-party, which accurately reflects that the data stays within your infrastructure.

Instead of sending requests directly to `api.croct.io`, the SDK sends them to a path on your domain, and your server forwards them to the API.

> **This is a standard practice**
>
> This approach does not bypass any privacy controls. It routes requests through your own infrastructure, where standard privacy policies and data handling practices still apply.

## How it works

The proxy sits between the SDK and the API:

1. **SDK sends the request**

   The SDK sends a request to `your-domain.com/croct/*`.

2. **Proxy forwards it**

   Your proxy forwards the request to `api.croct.io/*`.

3. **Response flows back**

   The response flows back through your domain to the SDK.

Because the browser only sees a request to your own domain, ad blockers have no reason to block it.

## Set up the proxy

Pick the option that matches your stack.

### Vercel or Next.js rewrites

If you deploy to Vercel or use Next.js, add a [rewrite rule](https://nextjs.org/docs/app/api-reference/next-config-js/rewrites) to your configuration. This is the simplest approach because it requires no additional server.

**next.config.js**

```js
module.exports = {
  async rewrites() {
    return [
      {
        source: '/croct/:path*',
        destination: 'https://api.croct.io/:path*',
      },
    ];
  },
};
```

The rewrite runs at the edge, so requests to `/croct/*` are forwarded to the API transparently.

### Cloudflare Workers

Create a [Cloudflare Worker](https://developers.cloudflare.com/workers/) that forwards requests to the API.

**worker.js**

```js
export default {
  async fetch(request) {
    const url = new URL(request.url);
    const target = new URL(url.pathname.replace('/croct', ''), 'https://api.croct.io');

    target.search = url.search;

    const headers = new Headers(request.headers);

    headers.set('X-Forwarded-For', request.headers.get('CF-Connecting-IP'));

    const proxyRequest = new Request(target, {
      method: request.method,
      headers: headers,
      body: request.body,
    });

    return fetch(proxyRequest);
  },
};
```

Deploy the Worker with [`wrangler`](https://developers.cloudflare.com/workers/wrangler/) and configure a route so that requests to `your-domain.com/croct/*` are handled by the Worker.

### Nginx reverse proxy

Add a [`location`](https://nginx.org/en/docs/http/ngx_http_core_module.html#location) block to your Nginx configuration that forwards requests to the API.

**nginx.conf**

```nginx
location /croct/ {
  proxy_pass https://api.croct.io/;
  proxy_ssl_server_name on;
  proxy_set_header Host api.croct.io;
  proxy_set_header X-Real-IP $remote_addr;
  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
```

Reload Nginx after updating the configuration.

### Node.js with Express

Create a standalone [Express](https://expressjs.com/) server that proxies requests using [`http-proxy-middleware`](https://github.com/chimurai/http-proxy-middleware).

Start by creating a `package.json` with the required dependencies:

**package.json**

```json
{
  "name": "croct-proxy",
  "private": true,
  "dependencies": {
    "express": "^4.21.0",
    "http-proxy-middleware": "^3.0.0"
  }
}
```

Then create the server file that sets up the proxy:

**server.js**

```js
const express = require('express');
const {createProxyMiddleware} = require('http-proxy-middleware');

const app = express();

app.use(
  '/croct',
  createProxyMiddleware({
    target: 'https://api.croct.io',
    changeOrigin: true,
    pathRewrite: {'^/croct': ''},
    on: {
      proxyReq: (proxyReq, req) => {
        proxyReq.setHeader('X-Forwarded-For', req.ip);
      },
    },
  }),
);

const port = process.env.PORT || 3001;

app.listen(port, () => {
  console.log(`Proxy server running on port ${port}`);
});
```

Install the dependencies and start the server:

```bash
npm install && node server.js
```

## Configure the SDK

After setting up the proxy, configure the SDK to send requests through your domain instead of the default endpoint.

**Plug JS — JavaScript**

```diff
import croct from '@croct/plug';

croct.plug({
  appId: '00000000-0000-0000-0000-000000000000', // your app ID
+  baseEndpointUrl: 'https://your-domain.com/croct',
});
```

**Plug JS — TypeScript**

```diff
import croct from '@croct/plug';

croct.plug({
  appId: '00000000-0000-0000-0000-000000000000', // your app ID
+  baseEndpointUrl: 'https://your-domain.com/croct',
});
```

**Plug React — JavaScript**

```diff
import {CroctProvider} from '@croct/plug-react';

export default function App() {
  return (
    <CroctProvider
      appId="00000000-0000-0000-0000-000000000000" // your app ID
+      baseEndpointUrl="https://your-domain.com/croct"
    >
      {/* Your app */}
    </CroctProvider>
  );
}
```

**Plug React — TypeScript**

```diff
import type {ReactElement} from 'react';
import {CroctProvider} from '@croct/plug-react';

export default function App(): ReactElement {
  return (
    <CroctProvider
      appId="00000000-0000-0000-0000-000000000000" // your app ID
+      baseEndpointUrl="https://your-domain.com/croct"
    >
      {/* Your app */}
    </CroctProvider>
  );
}
```

**Plug Vue — JavaScript**

**src/main.ts**

```diff
import {createApp} from 'vue'
import {createCroct} from '@croct/plug-vue'
import App from './App.vue'

const app = createApp(App)

app.use(createCroct({
  appId: '00000000-0000-0000-0000-000000000000', // your app ID
+  baseEndpointUrl: 'https://your-domain.com/croct',
}))

app.mount('#app')
```

**Plug Next**

```diff
NEXT_PUBLIC_CROCT_APP_ID=<APPLICATION_ID>
CROCT_API_KEY=<API_KEY>
+NEXT_PUBLIC_CROCT_BASE_ENDPOINT_URL=https://your-domain.com/croct
```

**Plug Nuxt**

```diff
export default defineNuxtConfig({
  modules: ['@croct/plug-nuxt'],
  croct: {
    appId: '00000000-0000-0000-0000-000000000000',
+    baseEndpointUrl: 'https://your-domain.com/croct',
  },
})
```

Replace `https://your-domain.com/croct` with the actual URL where your proxy is running.

## Try it out

Verify that the proxy is working correctly:

1. **Open the browser dev tools**

   Navigate to your application and open the **Network** tab in the browser developer tools.

2. **Check the request URLs**

   Filter by your domain and look for paths starting with `/croct/`. Confirm that no requests are sent to `api.croct.io`.

3. **Test with an ad blocker**

   Enable an ad blocker extension and reload the page. Verify that the requests still go through and that dynamic content renders correctly.

- [Ad blocker interference](/immersion/guides/ad-blocker-interference): Learn why ad blockers interfere with SDK requests.
- [Custom API endpoint](/reference/sdk/javascript/api/plug/plug#configuration-baseendpointurl-prop): Configure the SDK to use a custom API endpoint.