attribu.tech

Vue.js proxy

Proxy attribu.tech analytics through your Vue.js application.

The Vue CLI and Vite dev server proxies only work during development. For production, use Nginx or Apache as shown below.
See Proxy the tracking script for an overview of why and how proxying works.

Step 1: Development proxy (Vue CLI)

If your project uses Vue CLI, add a proxy config to vue.config.js:

module.exports = {
  devServer: {
    proxy: {
      "/js/script.js": {
        target: "https://attribu.tech",
        changeOrigin: true,
      },
      "/api/proxy/events": {
        target: "https://attribu.tech",
        changeOrigin: true,
        pathRewrite: { "^/api/proxy/events": "/api/events" },
      },
    },
  },
};

Step 2: Development proxy (Vite)

For Vite-based Vue projects, configure the proxy in vite.config.js:

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
      "/js/script.js": {
        target: "https://attribu.tech",
        changeOrigin: true,
      },
      "/api/proxy/events": {
        target: "https://attribu.tech",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api\/proxy\/events/, "/api/events"),
      },
    },
  },
});

Step 3: Production with Nginx

In production, add these location blocks to your Nginx config:

# Proxy the attribu.tech tracking script
location /js/attribu.js {
    proxy_pass https://attribu.tech/js/script.js;
    proxy_set_header Host attribu.tech;
    proxy_ssl_server_name on;
}

# Proxy the attribu.tech event API
location /api/proxy/events {
    proxy_pass https://attribu.tech/api/events;
    proxy_set_header Host attribu.tech;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_ssl_server_name on;
}

Or with Apache:

# Enable required modules
# sudo a2enmod proxy proxy_http ssl

SSLProxyEngine On

# Proxy the attribu.tech tracking script
ProxyPass        /js/attribu.js https://attribu.tech/js/script.js
ProxyPassReverse /js/attribu.js https://attribu.tech/js/script.js

# Proxy the attribu.tech event API
ProxyPass        /api/proxy/events https://attribu.tech/api/events
ProxyPassReverse /api/proxy/events https://attribu.tech/api/events

# Forward the visitor's real IP
ProxyPreserveHost Off
RequestHeader set X-Forwarded-For "%{REMOTE_ADDR}s"

Step 4: Update your script tag

Point the script src to your proxied path and set data-api-url to your proxied API endpoint:

<script
  defer
  data-website-id="YOUR_SITE_ID"
  data-domain="yourdomain.com"
  data-api-url="https://yourdomain.com/api/proxy/events"
  src="/js/attribu.js"
></script>
Replace YOUR_SITE_ID with your actual Website ID from attribu.tech. Replace yourdomain.com with your website's root domain.

Verify installation

  1. Visit your site in an incognito/private window.
  2. Open your browser's Developer Tools and go to the Network tab.
  3. Confirm the script loads from /js/attribu.js on your domain.
  4. Confirm the pageview POST goes to /api/proxy/events on your domain.
  5. Check your attribu.tech dashboard. A new pageview should appear within a few seconds.

Troubleshooting

  • All visitors show the same location - Your production proxy must forward the visitor's real IP via X-Forwarded-For. Check your Nginx or Apache config.
  • Proxy works in dev but not production - The Vite/Vue CLI dev server proxy does not run in production builds. You need a server-side proxy like Nginx or Apache.
  • CORS errors - Make sure changeOrigin: true is set in your dev proxy config. In production, the server proxy eliminates CORS issues entirely.

What's next

PreviousFastAPINextNginx
Copied