如何在React Native应用中像对接DialogFlow ES一样集成DialogFlow CX？

可以在React Native应用中直接集成Dialogflow CX，你遇到的404状态码问题可按照以下步骤排查解决：

404问题常见排查点 #

• 首先确认请求路径格式正确，Dialogflow CX的detectIntent标准接口路径为：
  https://<location>-dialogflow.googleapis.com/v3/projects/<projectId>/locations/<location>/agents/<agentId>/sessions/<sessionId>:detectIntent
  需要重点检查DEFAULT_BASE_URL是否拼接了对应区域前缀、是否漏了v3版本号，比如你的agent部署在asia-southeast1区域，那么BASE_URL应该是https://asia-southeast1-dialogflow.googleapis.com/v3/，前缀错误或者版本号缺失是404报错最常见的原因。
• 确认参数取值正确：projectId、location、agentId、sessionId四个参数不要填写错误，agentId可在Dialogflow CX控制台的agent设置页面获取，不要和Dialogflow ES的agent ID混用，location必须和你创建agent时选择的区域完全一致。
• 确认鉴权配置正确：你使用的服务账号必须被授予Dialogflow API Client角色，生成accessToken时的scope要设置为https://www.googleapis.com/auth/dialogflow，权限不足也可能返回类404错误。

可用参考代码 #

// 先确认所有变量取值正确
const DEFAULT_BASE_URL = `https://${this.location}-dialogflow.googleapis.com/v3/`;
const requestUrl = `${DEFAULT_BASE_URL}projects/${this.projectId}/locations/${this.location}/agents/${this.agentId}/sessions/${this.sessionId}:detectIntent`;

let data = {
  "queryInput": {
    "text": {
      "text": "Hi!"
    },
    "languageCode": "en"
  },
  "queryParams": {
    "timeZone": "Asia/Colombo"
  }
}

fetch(requestUrl, {
  method: "POST",
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer ' + this.accessToken
  },
  body: JSON.stringify(data)
})
.then(response => {
  if (!response.ok) {
    // 打印错误详情方便定位问题
    return response.text().then(errText => {
      console.log("错误详情：", errText)
      throw new Error(`请求失败，状态码：${response.status}`)
    })
  }
  return response.json()
})
.then(result => {
  console.log("识别结果：", result)
})
.catch(error => {
  console.log("请求异常：", error)
})

生产环境建议 #

不建议直接在React Native前端存放服务账号私钥、生成accessToken，前端打包后的代码很容易被反编译拿到私钥，导致云账号资源泄露被滥用。更推荐的方案是增加一层后端中转：前端调用你自己的后端接口，后端使用官方Dialogflow CX Node.js客户端库调用CX接口，再把结果返回给前端。

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