React Native通过Visual Studio Dev Tunnel调试.NET Web API时Cookie丢失问题

问题描述 #

我开发了一个对接后端.NET Web API的React Native应用，想让Android模拟器调用本地调试状态的Web API实例。试过网上普遍推荐的10.0.2.2地址，但一直返回通用网络错误，所有尝试都无效。改用Visual Studio的Dev Tunnel后，模拟器能正常连接并触发API的调试断点，但出现了新问题：请求中的Cookie被剥离。

React Native发送请求时明明包含带认证令牌的Cookie，但在Visual Studio调试器里查看接收的请求，Cookie完全丢失。而调用公网部署的Web API服务时，Cookie能正常传递，只有通过Dev Tunnel调试时才会出现这个问题。

想请教：Dev Tunnel处理Cookie是否有特殊机制？有没有人遇到过类似问题？我在谷歌上没找到相关解决方案。

可能的原因及解决办法 #

• Dev Tunnel的跨域安全策略限制：Dev Tunnel属于反向代理服务，默认会遵循浏览器的跨域安全规则。如果你的认证Cookie没有设置SameSite=None+Secure属性，而Dev Tunnel采用HTTPS连接，客户端会因为安全策略拒绝将Cookie传递到代理后的本地服务。
  • 解决：在.NET Web API的Cookie配置中，强制设置这两个属性。示例代码（Program.cs）：

    builder.Services.ConfigureApplicationCookie(options =>
    {
        options.Cookie.SameSite = SameSiteMode.None;
        options.Cookie.SecurePolicy = CookieSecurePolicy.Always;
    });
    

• Dev Tunnel的转发规则过滤：Visual Studio Dev Tunnel默认可能会过滤掉部分Cookie属性，或者未开启完整的Cookie转发。
  • 解决：打开Visual Studio的Dev Tunnel管理面板，找到当前使用的隧道，进入设置界面检查“转发规则”，确认已开启Cookie转发选项，无额外过滤规则。
• React Native请求配置遗漏：虽然公网环境正常，但Dev Tunnel的临时域名属于跨域场景，若请求未明确配置携带凭证，Cookie不会被自动传递。
  • 解决：确保请求工具开启凭证携带：
    • Axios示例：

      axios.get('https://你的DevTunnel域名/api/接口', { withCredentials: true })
      

    • Fetch示例：

      fetch('https://你的DevTunnel域名/api/接口', { credentials: 'include' })
      

• 模拟器证书信任问题：如果Android模拟器不认可Dev Tunnel的HTTPS证书，会阻止Cookie等敏感信息的传递。
  • 解决：在模拟器中手动安装Dev Tunnel的根证书，或者仅调试阶段临时关闭模拟器的安全验证（注意：仅用于本地调试，禁止生产环境使用）。

验证步骤 #

1. 用Postman直接调用Dev Tunnel的URL并携带Cookie，确认API是否能正常接收，排除React Native端的问题。
2. 在Web API中添加中间件日志，打印所有请求头，检查Dev Tunnel是否转发了Cookie相关字段。
3. 查看Visual Studio输出窗口中的Dev Tunnel日志，确认是否存在Cookie被过滤的记录。

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