Dialogflow Messenger CX拦截请求、通过queryParams添加自定义参数咨询

• 核心原因是df-request-sent本身就是请求发送完成之后才触发的后置事件：事件被抛出的时候，Dialogflow CX的请求报文已经构造完毕、通过网络发出去了，这个时候不管怎么修改事件detail里的属性值，都只是改了内存里存的一份请求快照，根本影响不到已经发出去的真实请求。
• 这个事件的设计用途只是给业务侧做请求发送完成后的埋点、日志上报，从根上就不支持反向修改请求参数，官方文档没写通过这个事件加参数的方法，就是因为这个事件根本不承担参数修改的职责。

• 不要尝试用df-request-sent做参数修改，换用两个实际可落地的方案，适配不同的参数场景：
  • 参数为固定值、不需要动态变化的场景
    直接在页面渲染df-messenger组件的时候，通过原生支持的query-params属性传入自定义参数值，组件会自动把这些参数合并到每次请求的queryParams字段里，示例写法：

    <df-messenger
      project-id="你的Dialogflow项目ID"
      agent-id="你的CX代理ID"
      location="代理部署的区域"
      query-params='{"customFixedParamA":"参数值A","customFixedParamB":"参数值B"}'
    ></df-messenger>
    

  • 参数需要根据用户交互动态生成、无法在初始化时写死的场景
    可以通过全局fetch拦截的方式，在网络请求真正发出去之前修改请求报文，把自定义参数合并进去，不需要依赖组件本身的事件体系：

    const originalFetch = window.fetch;
    // 重写全局fetch拦截对话接口请求
    window.fetch = async (targetUrl, requestConfig) => {
      // 仅拦截发往Dialogflow CX对话接口的POST请求
      if (targetUrl.includes('dialogflow.googleapis.com') && requestConfig?.method === 'POST') {
        const payload = JSON.parse(requestConfig.body || '{}');
        // 合并自定义动态参数到queryParams字段
        payload.queryParams = {
          ...(payload.queryParams || {}),
          customDynamicParam: '这里替换成你需要动态生成的参数值'
        };
        // 把修改后的请求体重新序列化回请求配置
        requestConfig.body = JSON.stringify(payload);
      }
      // 执行原来的fetch逻辑，发出修改后的请求
      return originalFetch(targetUrl, requestConfig);
    };
    

• 实操注意点：做fetch拦截的时候一定要加请求地址的判断条件，不要拦截到其他业务的接口请求，避免影响站点其他功能。

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