Source: https://datafa.st/docs/vuejs-proxy
Markdown source: https://datafa.st/docs/vuejs-proxy.md
Description: How to proxy DataFast analytics through your Vue.js development server

# Proxy DataFast with Vue.js

Learn how to proxy DataFast analytics through your Vue.js development server to bypass adblockers and improve accuracy.

## 1. Configure Vue.js Development Server

If you're using Vue CLI, update your `vue.config.js` file:

```javascript
module.exports = {
  devServer: {
    proxy: {
      '/js/script.js': {
        target: 'https://datafa.st',
        changeOrigin: true,
        pathRewrite: {
          '^/js/script.js': '/js/script.js'
        }
      },
      '/api/events': {
        target: 'https://datafa.st',
        changeOrigin: true,
        pathRewrite: {
          '^/api/events': '/api/events'
        }
      }
    }
  }
}
```

> **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)

## 2. For Production: Configure Your Web Server

### Nginx Configuration
```nginx
location /js/script.js {
    proxy_pass https://datafa.st/js/script.js;
    proxy_set_header Host datafa.st;
    proxy_cache_valid 200 1y;
    add_header Cache-Control "public, max-age=31536000";
    expires 1y;
}

location /api/events {
    proxy_pass https://datafa.st/api/events;
    proxy_set_header Host datafa.st;
    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;
    proxy_set_header x-datafast-real-ip $remote_addr;
    
    # Allow POST requests
    proxy_method POST;
    proxy_pass_request_body on;
}
```

### Apache Configuration
```apache
<Location "/js/script.js">
    ProxyPass https://datafa.st/js/script.js
    ProxyPassReverse https://datafa.st/js/script.js
    Header set Cache-Control "public, max-age=31536000"
</Location>

<Location "/api/events">
    ProxyPass https://datafa.st/api/events
    ProxyPassReverse https://datafa.st/api/events
    RequestHeader set x-datafast-real-ip %{REMOTE_ADDR}e
</Location>
```

> **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.

## 3. Update Your Script Tag

Replace your existing DataFast script with the proxied version:

```html
<script
  defer
  data-website-id="dfid_******"
  data-domain="your_domain.com"
  src="/js/script.js"
></script>
```

## 4. Deploy your changes

The proxy configuration will take effect automatically after deployment.

## 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

> **warning:** For production environments, it's recommended to use a proper web server (Nginx/Apache) configuration rather than the development server proxy.

## 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