Nuxt2配置Plausible脚本代理后统计未更新问题求助

问题描述 #

已为Plausible脚本配置代理，脚本部署成功，事件触发返回成功状态，但统计数据未更新。

现有配置 #

Nuxt头部脚本配置

script: [
      {
        src: '/js/script.js',
        defer: true,
        async: true,
        'data-domain': '****.***',
      },
    ],

（注：****.****为站点域名）

代理文件配置

require('dotenv').config()
export default {
  '/api/event': {
    target: 'https://plausible.io/api/event',
    pathRewrite: { '^/api/event': '' },
  },
  '/api': {
    target: process.env.NUXT_ENV_API_URL
      ? process.env.NUXT_ENV_API_URL
      : 'http://localhost:4000',
    pathRewrite: { '^/': '' },
  },
  '/js/script.js': {
    target: 'https://plausible.io/js/script.js',
    pathRewrite: { '^/js/script.js': '' },
  },
}

排查与解决方法 #

• 调整代理规则匹配顺序
  代理规则按定义顺序匹配，当前/api规则会优先拦截/api/event请求，转发到你的后端服务而非Plausible API。需将/api/event规则移至/api规则之前，确保更具体的路径先匹配。

• 指定脚本的API代理路径
  默认Plausible脚本会直接请求官方API地址，需通过data-api属性告知脚本使用代理路径。修改Nuxt头部脚本配置：

  script: [
        {
          src: '/js/script.js',
          defer: true,
          async: true,
          'data-domain': '****.***',
          'data-api': '/api/event' // 添加该属性指定代理端点
        },
      ],
  

• 添加代理跨域配置
  代理转发时需正确设置请求头，避免Plausible拒绝请求。在/api/event代理配置中加入changeOrigin: true：

  '/api/event': {
      target: 'https://plausible.io/api/event',
      pathRewrite: { '^/api/event': '' },
      changeOrigin: true, // 确保Host头被正确设置
    },
  

• 修正后端API路径重写规则
  原/api规则的pathRewrite: { '^/': '' }会导致路径错误，建议修正为：

  '/api': {
      target: process.env.NUXT_ENV_API_URL
        ? process.env.NUXT_ENV_API_URL
        : 'http://localhost:4000',
      pathRewrite: { '^/api': '' }, // 仅去除/api前缀
    },
  

内容的提问来源于stack exchange，提问作者Andrii Dulkai