Route API calls through your 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 to your configuration. This is the simplest approach because it requires no additional server.

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 that forwards requests to the API.

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 and configure a route so that requests to your-domain.com/croct/* are handled by the Worker.

Nginx reverse proxy

Add a location block to your Nginx configuration that forwards requests to the API.

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 server that proxies requests using http-proxy-middleware.

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

{  "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:

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:

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.

import croct from '@croct/plug';
croct.plug({  appId: '00000000-0000-0000-0000-000000000000', // your app ID  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 personalized content renders correctly.