Instagram Business API OAuth验证失败：redirect_uri匹配仍报错

以下是针对问题的具体排查和修复步骤：

1. 检查Code的获取与处理逻辑 #

你的前端Callback页面中对code的处理可能存在问题，导致传递给后端的code无效（Meta会将无效code错误误导为redirect_uri不一致）：

• 在handleCallback中打印rawCode和处理后的code，确认code是完整有效的字符串，没有被截断或变为空值。
• 如果React应用使用hash路由模式，searchParams.get("code")无法正确获取code（query参数会被包含在hash中），需改为从hash解析：

  const hashParams = new URLSearchParams(window.location.hash.slice(1));
  const rawCode = hashParams.get("code");
  const code = rawCode?.trim(); // 去掉不必要的split("#")处理
  

• 移除多余的split("#")[0]处理，正常情况下Meta返回的code不会包含#后缀。

2. 确保Redirect URI的绝对一致性 #

虽已确认uri一致，仍需验证细节：

• 在后端打印接收到的redirectUri，确认它与前端授权请求中的redirect_uri（解码后）完全一致，包括：
  • 协议必须是https（Vercel部署默认是https，避免本地开发时的http混淆）
  • 域名、路径完全匹配，无末尾斜杠、大小写差异或隐藏字符
• 后端不要对redirectUri进行额外编码，Meta要求交换令牌时的redirect_uri必须与授权请求中解码后的原始值完全一致。

3. 检查Vercel部署的路由配置 #

如果前端使用browser路由模式，需确保Vercel配置了正确的重写规则，避免路由重定向导致redirect_uri变化：
在项目根目录创建vercel.json，添加以下内容：

{
  "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}

确保所有路由请求都指向React入口文件，避免Vercel返回404或自动重定向。

4. 验证Meta应用与环境变量配置 #

• 再次检查Meta应用后台的Valid OAuth Redirect URIs，确保添加的是https://dmflow-seven.vercel.app/instagram/callback，无多余空格或拼写错误。
• 确认后端的instagramAppId和instagramAppSecret环境变量与Meta应用后台完全一致，避免因凭证错误导致的误导性报错。
• 如果应用处于开发模式，确保测试用的Instagram账号已添加为Meta应用的测试用户。

5. 手动调试令牌交换请求 #

用curl手动模拟令牌交换请求，参数与后端代码一致：

curl -X POST "https://api.instagram.com/oauth/access_token" \
  -d "client_id=YOUR_APP_ID" \
  -d "client_secret=YOUR_APP_SECRET" \
  -d "grant_type=authorization_code" \
  -d "redirect_uri=https://dmflow-seven.vercel.app/instagram/callback" \
  -d "code=YOUR_AUTH_CODE"

如果手动请求成功，说明问题出在代码逻辑中；如果手动请求也报错，说明Meta应用配置或code本身存在问题。

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