Expo React应用访问AWS Cloudfront深度链接时查询串丢失求助

1. URL拼接错误（最可能的原因） #

你写的URL拼接存在语法问题：/give&stuff?Id=${item.Identifier} 里的&被放在了路径部分，这不符合URL规范——&是查询参数的分隔符，只能用在?之后。

• 如果stuff是路径的一部分，应改为/give/stuff?Id=${item.Identifier}
• 如果stuff是无值的查询参数，应改为/give?stuff&Id=${item.Identifier}

这种错误会导致WebView或Cloudfront解析URL时出现异常，直接截断后续查询参数，所以后端只能收到基础URL。

2. Cloudfront缓存行为配置问题 #

检查Cloudfront分发的缓存行为设置：

• 进入AWS Cloudfront控制台，找到对应分发的缓存行为
• 查看「查询字符串转发和缓存」选项：
  • 若设置为「不转发查询字符串」，Cloudfront会直接剥离所有查询参数，导致S3/Next.js收不到参数
  • 需调整为「转发所有查询参数，基于查询参数缓存」（或按需转发指定参数）

3. Expo WebView的URL编码问题 #

即使URL拼接正确，参数值中的特殊字符也可能导致解析异常。建议对参数值进行URL编码：

const webUrl = `${process.env.WEB_BASE_URL}/give/stuff?Id=${encodeURIComponent(item.Identifier)}`

同时确认WebView接收的url参数未被其他逻辑修改——你代码里的onLoad日志可以验证这一点，如果日志里的URL是正确的，问题大概率在Cloudfront或S3配置上。

4. Next.js页面参数处理验证 #

虽然浏览器访问正常，仍可确认Next.js页面是否正确获取查询参数：

• 在对应页面的getServerSideProps中打印context.query，或在客户端用useRouter().query查看是否能拿到Id参数
• 若浏览器能拿到但WebView请求拿不到，还是回到Cloudfront的转发配置排查

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