React+AWS Amplify环境下如何获取URL参数？

一、你的诊断是否正确？ #

不正确。useSearchParams是纯客户端API，完全不需要SSR支持，只要在react-router-dom的路由组件内就能正常使用，和AWS Amplify是否支持SSR无关。

从堆栈追踪指向@aws-amplify/auth的_handleAuthResponse方法来看，错误根源是Amplify Auth的安全配置问题，常见原因包括：

• 回调URL未加入Amplify Auth的「允许回调URL列表」（需在AWS控制台Cognito用户池或Amplify项目配置中设置）
• 页面运行环境不符合Amplify Auth的安全要求（比如非HTTPS环境，localhost通常例外，但部分版本可能存在配置bug）
• 回调URL的协议、域名与Amplify配置的授权地址不匹配

二、可行的URL参数提取方案 #

结合你最终要将code传给Lambda的需求，提供以下几种方案：

方案1：修正Amplify配置，继续用客户端提取 #

先解决"The operation is insecure"错误：

1. 登录AWS控制台，进入Cognito用户池的「应用集成」→「应用客户端设置」，将你的回调URL（如http://localhost:3000/getcode/或生产环境HTTPS地址）加入「允许的回调URL」列表
2. 确保Amplify项目aws-exports.js中的oauth.redirectSignIn配置与上述URL完全一致
3. 本地测试时，确认Amplify Auth未强制要求HTTPS（localhost默认被允许，但部分版本可能存在兼容问题）

配置修正后，你原本的useSearchParams代码即可正常运行，提取code后再通过Amplify API调用Lambda完成后续逻辑。

方案2：直接将回调URL指向Lambda函数 #

跳过前端，让外部API直接把code传给Lambda：

• 在AWS Lambda创建处理函数，配置API Gateway作为触发器，生成一个HTTPS端点（如https://<api-id>.execute-api.<region>.amazonaws.com/prod/get-code）
• 将该API Gateway地址设为外部API的回调URL，外部API会直接通过GET请求将code参数传入Lambda
• 在Lambda函数中，从事件对象的queryStringParameters中提取code，执行后续自动化流程

该方案完全绕开前端，无需处理客户端安全配置，适合不需要前端参与code处理的场景。

方案3：纯客户端原生方式提取参数（不依赖react-router） #

如果不想依赖react-router的API，可以直接用浏览器原生API提取参数：

import React, { useEffect, useState } from 'react';

function GetCode() {
  const [code, setCode] = useState('');

  useEffect(() => {
    const params = new URLSearchParams(window.location.search);
    const codeParam = params.get('code');
    if (codeParam) {
      setCode(codeParam);
      // 此处可直接调用Lambda或Amplify API
    }
  }, []);

  return (
    <div>
      <p>Code: {code}</p>
    </div>
  );
}

export default GetCode;

这种方式纯客户端执行，无需SSR，只要解决Amplify的安全配置问题即可正常运行。

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