用户访问页面时自动添加query参数的实现方案咨询

可以实现，根据不同使用场景有以下几种成熟方案：

1. 前端页面内实现（仅对当前站点生效） #

• 动态加载资源时统一处理：封装URL拼接方法，所有动态加载的JS、CSS等资源地址都经过方法处理后再使用，示例代码如下：

function appendCustomQuery(rawUrl, queryObj = { example: 'value' }) {
  const urlInstance = new URL(rawUrl);
  Object.entries(queryObj).forEach(([key, value]) => {
    urlInstance.searchParams.set(key, value);
  });
  return urlInstance.toString();
}

// 使用示例
const scriptEle = document.createElement('script');
scriptEle.src = appendCustomQuery('https://example.org/example-script.js');
document.head.appendChild(scriptEle);

• 全局拦截所有请求：注册Service Worker，在fetch事件中拦截当前站点发出的所有请求，修改URL后再发送，不会触发资源二次加载，适合生产环境全量处理的场景。
• 静态资源批量修改：DOM加载完成后遍历页面内所有script、link标签的src/href属性，替换为带参数的地址后重新插入DOM，该方案会导致资源二次加载，仅建议特殊调试场景使用。

2. 浏览器全局生效（对所有访问的页面生效） #

• 开发浏览器扩展，通过webRequestAPI拦截所有浏览器发出的请求，匹配规则后自动追加query参数，主流Chrome、Edge、Firefox均支持该能力。
• 使用本地代理工具（如Charles、Fiddler），在代理层匹配请求规则，修改URL后再转发到服务端，适合本地开发调试场景使用。

3. 服务端实现 #

如果需要在用户访问页面时自动跳转带参数的地址，可以在服务端做判断，无对应参数时返回302跳转至带参数的地址，以下是Nginx配置示例：

location ~* \.(js|css)$ {
  if ($arg_example = '') {
    rewrite ^(.*)$ $1?example=value permanent;
  }
}

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