调用Send API时问号丢失引发OAuthException错误求助

问题描述 #

我尝试两种方式调用Send API：第一种通过URLSearchParams设置access_token参数；第二种直接拼接带?的URL。但两种方式均出现问号被转义的情况，请求路径变为/messagesaccess_token=xxx，触发错误码2500的OAuthException。已在Heroku重新部署，问题仍未解决。

尝试的代码 #

第一种方式：使用URLSearchParams #

static async callSendApi(requestBody) {
  let url = new URL(
    `${API_URL}/${PAGE_ID}/messages`
  );
  url.search = new URLSearchParams({
    access_token: `${PAGE_ACCESS_TOKEN}`,
  });
  console.warn("Request body is\n" + JSON.stringify(requestBody));
  let response = await axios.post(url, {
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(requestBody),
    // access_token: `${PAGE_ACCESS_TOKEN}`,
  });
  if (!response.ok) {
    consoleconst`Unable to call Send API: ${response.statusText}`,
      await response.json();
  }
}

第二种方式：直接拼接URL #

static async callSendApi(requestBody) {
  let url = new URL(
    `${API_URL}/${PAGE_ID}/messages?access_token=${PAGE_ACCESS_TOKEN}`
  );
  /* url.search = new URLSearchParams({
    access_token: `${PAGE_ACCESS_TOKEN}`,
  });*/
  console.warn("Request body is\n" + JSON.stringify(requestBody));
  let response = await axios.post(url, {
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(requestBody),
    // access_token: `${PAGE_ACCESS_TOKEN}`,
  });
  if (!response.ok) {
    consoleconst`Unable to call Send API: ${response.statusText}`,
      await response.json();
  }
}

收到的错误信息 #

error: { 
  message: 'Unknown path components: /messagesaccess_token=access_token',
  type: 'OAuthException',
  code: 2500,
  fbtrace_id: 'AbBJGVotjz3ijKKLzVE6_CM'
}

解决方案 #

问题根源在于axios参数传递错误：你把headers和请求体都放在了第二个参数（请求体位置），而axios的POST请求正确格式为axios.post(url, data, config)，其中config包含headers等配置项；同时你错误地用body字段包裹请求体，axios会直接将第二个参数作为请求体发送。

修正后的代码示例 #

方式一：使用URLSearchParams

static async callSendApi(requestBody) {
  const url = new URL(`${API_URL}/${PAGE_ID}/messages`);
  url.searchParams.set('access_token', PAGE_ACCESS_TOKEN);
  
  console.warn("Request body is\n" + JSON.stringify(requestBody));
  
  try {
    const response = await axios.post(url.toString(), requestBody, {
      headers: { "Content-Type": "application/json" }
    });
    // 处理正常响应
  } catch (error) {
    console.error(`Unable to call Send API: ${error.response.statusText}`, error.response.data);
  }
}

方式二：直接拼接URL字符串

static async callSendApi(requestBody) {
  const url = `${API_URL}/${PAGE_ID}/messages?access_token=${PAGE_ACCESS_TOKEN}`;
  
  console.warn("Request body is\n" + JSON.stringify(requestBody));
  
  try {
    const response = await axios.post(url, requestBody, {
      headers: { "Content-Type": "application/json" }
    });
    // 处理正常响应
  } catch (error) {
    console.error(`Unable to call Send API: ${error.response.statusText}`, error.response.data);
  }
}

关键修正点 #

• 将请求体直接作为axios.post的第二个参数，无需用body字段包裹
• headers必须放在第三个参数的config对象中
• 使用URL对象时，调用toString()转为字符串后传给axios，避免URL解析异常
• 原代码中的consoleconst是语法错误，改为console.error并用try/catch捕获错误

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