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:
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'
}
}
}
}
}
2. For Production: Configure Your Web Server
Nginx Configuration
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;
# Allow POST requests
proxy_method POST;
proxy_pass_request_body on;
}
Apache Configuration
<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
</Location>
3. Update Your Script Tag
Replace your existing DataFast script with the proxied version:
<script
defer
data-website-id="yourwebsiteid"
data-domain="yourdomain.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:
- Visit your website
- Open the network tab in your browser's developer tools
- Check that analytics requests are going through your domain instead of datafa.st