React+Express对接需Cookie验证的外部API技术方案咨询

一、Cookie存储最佳策略：直接存在自研服务端 #

别考虑存在前端本地（localStorage/sessionStorage）：一来浏览器同源策略限制，前端没法直接给外部API跨域发送Cookie；二来外部登录Cookie属于敏感凭证，存在前端极易被XSS攻击窃取，风险极高。
最优路径是让自研API充当中间层：前端将登录请求发给自研API，自研API转发至外部登录接口，拿到外部API返回的Set-Cookie后，把这些Cookie和用户的自研登录态（比如项目内的用户token）绑定，存储在服务端（Redis、数据库均可）。后续所有需要调用外部数据接口的请求，全走自研API转发，由服务端自动带上对应的Cookie。

二、必须拦截外部API的Set-Cookie头 #

如果前端直接调用外部登录接口，浏览器会因Cookie域不匹配，自动丢弃外部API返回的Set-Cookie，根本无法留存。所以必须通过自研API转发登录请求：自研服务端拿到外部API的响应后，提取所有Set-Cookie头内容，解析出Cookie的键值对、有效期等信息，和用户会话绑定存储即可——无需把这些Cookie返回给前端，前端只需要维护自研的登录态。

三、自研API回传Cookie的实操步骤 #

1. 前端调用自研的业务接口（需拉取外部数据时），自研API先根据前端携带的自研登录态，找到该用户对应的外部Cookie集合。
2. 按外部API要求的格式拼接Cookie：多个Cookie用; 分隔，例如uid=123; token=abc。
3. 转发请求到外部数据接口时，将拼接好的字符串放入请求头的Cookie字段中发送。
4. 注意：外部Cookie中的HttpOnly、Secure等属性是针对浏览器的约束，服务端转发时仅需传递键值对，无需携带这些属性。

四、外部域名Cookie的核心解法：用服务端转发绕开同源限制 #

浏览器的同源策略是跨域Cookie问题的根源，但服务端不受此限制：

• 所有外部API的请求（登录、数据接口）全部通过自研API转发，前端仅与自研域名通信，完全避开跨域Cookie的坑。
• 自研服务端存储Cookie时需记录有效期，到期后自动触发外部登录流程刷新Cookie，避免用户反复手动登录。
• 若外部Cookie带有SameSite属性，无需额外处理——SameSite是约束浏览器的规则，服务端发起请求不受影响。

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