排查从本地环境迁移至部署站点时请求发起链中出现的额外重定向问题

我之前处理过好几起AWS Amplify和OAuth流程冲突导致的重定向问题，咱们一步步拆解排查：

1. 优先检查AWS Amplify的重定向/重写规则 #

这是最常见的罪魁祸首！Amplify默认的单页应用(SPA)重写规则会把几乎所有非静态资源请求都指向index.html，这会直接拦截Spotify返回的授权码回调请求（也就是你的/redirect路径），触发额外重定向。

操作步骤：

• 登录AWS Amplify控制台，找到你的应用，进入Domain management -> Redirects and rewrites
• 检查现有的规则：
  • 默认的SPA规则看起来是这样的：

    源地址: </^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>
    目标地址: /index.html
    类型: 200 (Rewrite)

  • 这个规则会匹配/redirect，因为它不是静态资源文件。你需要修改这个正则，排除/redirect路径：
    把源地址改成：</^(?!\/redirect$)[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>
  • 或者，单独给/redirect添加一条优先级更高的规则：
    • 源地址: </^\/redirect$/>
    • 目标地址: /redirect
    • 类型: 200 (Rewrite)
    • 确保这条规则在默认SPA规则的上方（Amplify规则是从上到下匹配的）

2. 验证Spotify重定向URI的精确匹配 #

哪怕只差一个字符，Spotify都会触发异常行为：

• 登录Spotify开发者控制台，检查你配置的线上回调URI是不是完全等于https://soundfound.io/redirect：
  • 注意是否带HTTPS（线上必须用HTTPS，Spotify不接受HTTP的回调）
  • 检查末尾有没有多余的斜杠（比如https://soundfound.io/redirect/和https://soundfound.io/redirect是两个不同的地址）
  • 确认URI里没有大小写错误（虽然域名不区分大小写，但路径部分Spotify是严格匹配的）

3. 用curl测试回调路径的服务器响应 #

你可以通过命令行快速验证Amplify对/redirect路径的处理：

curl -v https://soundfound.io/redirect?code=test-authorization-code

观察输出里的状态码：

• 如果返回302 Found，说明Amplify正在重定向这个路径，回到第一步调整重写规则
• 如果返回200 OK，说明服务器端处理正常，问题可能在客户端路由逻辑

4. 兜底方案：提前捕获授权码 #

如果暂时找不到重定向根源，你可以在React应用里提前捕获授权码，避免被重定向丢失：
在应用的入口组件（比如App.js）里添加一个useEffect钩子，一加载就检查URL参数：

import { useEffect } from 'react';

function App() {
  useEffect(() => {
    // 解析URL里的授权码
    const urlParams = new URLSearchParams(window.location.search);
    const authCode = urlParams.get('code');
    
    if (authCode) {
      // 这里执行你的授权码交换逻辑（比如请求Spotify获取token）
      handleAuthCodeExchange(authCode);
      
      // 处理完后从URL移除code参数，避免重复触发
      urlParams.delete('code');
      window.history.replaceState({}, document.title, `${window.location.pathname}${urlParams.toString() ? `?${urlParams.toString()}` : ''}`);
    }
  }, []);

  // ... 其他组件逻辑
}

这个方法能确保只要授权码出现在URL里，就会被立即捕获，哪怕之后发生重定向也不影响。

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