Source: https://datafa.st/docs/astro-proxy
Markdown source: https://datafa.st/docs/astro-proxy.md
Description: How to proxy DataFast analytics through your Astro app using middleware to bypass adblockers and improve tracking accuracy.

# Proxy DataFast with Astro

Learn how to proxy DataFast analytics through your Astro application using middleware to bypass adblockers and improve accuracy.

## 1. Create Middleware File

Create a middleware file at `src/middleware.js` (or `src/middleware.ts` for TypeScript):

```javascript
// src/middleware.js
export async function onRequest(context, next) {
  const { request } = context;
  const url = new URL(request.url);

  // Proxy the DataFast script
  if (url.pathname === '/js/script.js') {
    const response = await fetch('https://datafa.st/js/script.js');
    const script = await response.text();
    
    return new Response(script, {
      headers: {
        'Content-Type': 'application/javascript',
        'Cache-Control': 'public, max-age=31536000',
      },
    });
  }

  // Proxy the events endpoint
  if (url.pathname === '/api/events' && request.method === 'POST') {
    const body = await request.text();
    
    // Get client IP for accurate location tracking
    const clientIp = request.headers.get('x-real-ip') || 
                      request.headers.get('x-forwarded-for')?.split(',')[0] ||
                      request.headers.get('cf-connecting-ip') ||
                      '';
    
    const response = await fetch('https://datafa.st/api/events', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'User-Agent': request.headers.get('User-Agent') || '',
        'Origin': request.headers.get('Origin') || url.origin,
        'x-datafast-real-ip': clientIp,
      },
      body: body,
    });
    
    const responseText = await response.text();
    
    return new Response(responseText, {
      status: response.status,
      headers: {
        'Content-Type': 'application/json',
      },
    });
  }

  return next();
}
```

## 2. Configure Astro for Server Output

Update your `astro.config.mjs` to enable server-side rendering (required for middleware):

```javascript
// astro.config.mjs
import { defineConfig } from 'astro/config';
import node from '@astrojs/node';

export default defineConfig({
  output: 'server', // or 'hybrid'
  adapter: node({
    mode: 'standalone'
  }),
});
```

> You'll need to install the Node.js adapter: `npm install @astrojs/node`

## 3. Alternative: Static Site with API Routes

If you prefer to keep your site static, you can create API routes instead:

### Create Script Proxy Route

Create `src/pages/js/script.js.js`:

```javascript
// src/pages/js/script.js.js
export async function GET() {
  const response = await fetch('https://datafa.st/js/script.js');
  const script = await response.text();
  
  return new Response(script, {
    headers: {
      'Content-Type': 'application/javascript',
      'Cache-Control': 'public, max-age=31536000',
    },
  });
}
```

### Create Events Proxy Route

Create `src/pages/api/events.js`:

```javascript
// src/pages/api/events.js
export async function POST({ request }) {
  const body = await request.text();
  const url = new URL(request.url);
  
  // Get client IP for accurate location tracking
  const clientIp = request.headers.get('x-real-ip') || 
                    request.headers.get('x-forwarded-for')?.split(',')[0] ||
                    request.headers.get('cf-connecting-ip') ||
                    '';
  
  const response = await fetch('https://datafa.st/api/events', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'User-Agent': request.headers.get('User-Agent') || '',
      'Origin': request.headers.get('Origin') || url.origin,
      'x-datafast-real-ip': clientIp,
    },
    body: body,
  });
  
  const responseText = await response.text();
  
  return new Response(responseText, {
    status: response.status,
    headers: {
      'Content-Type': 'application/json',
    },
  });
}
```

> **Note:** If you already have an `/api/events` API endpoint, add `data-api-url` to the DataFast script tag to send events to your own API endpoint. For example, `data-api-url="/datafast-events"` will send events to `/datafast-events` instead of `/api/events`. Read more [here](/docs/script-configuration#api-url-data-api-url-optional)

> **Important:** If you notice all visitors showing from the same location in your analytics, make sure you're sending the `x-datafast-real-ip` header with the actual visitor IP address (not your proxy server IP) when forwarding events to DataFast's `/api/events` endpoint.

## 4. Update Your Script Tag

Replace your existing DataFast script with the proxied version in your layout:

```astro
---
// src/layouts/Layout.astro
const { title } = Astro.props;
---

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <title>{title}</title>
    <script
      defer
      data-website-id="dfid_******"
      data-domain="your_domain.com"
      src="/js/script.js"
    ></script>
  </head>
  <body>
    <slot />
  </body>
</html>
```

## 5. Deploy Your Site

The proxy configuration will take effect automatically after deployment. Make sure your hosting provider supports:
- Server-side rendering (for middleware approach)
- API routes (for static site approach)

Popular Astro-compatible hosts include Vercel, Netlify, and Cloudflare Pages.

## Verification

To verify the proxy is working:
1. Visit your website
2. Open the network tab in your browser's developer tools
3. Check that analytics requests are going through your domain instead of datafa.st

> Note: The middleware approach requires server-side rendering, while API routes work with both static and server-rendered sites.

## Troubleshooting

#### *All visitors showing from the same location*

If your analytics show all visitors from a single location (usually your server's location), your proxy isn't forwarding visitor IPs.

**To fix:**
1. Make sure your proxy sends the `x-datafast-real-ip` header with the actual visitor IP address (not your proxy server IP) when forwarding events to DataFast's `/api/events` endpoint