前端/移动开发面试题更新 2026-08-05

在发起跨域请求时,如果希望自动携带另一个域名下的Cookie,应该如何配置和操作?

前端/移动开发风险判断技术原理

考察说明

考查对跨域请求中Cookie携带机制的理解和前端配置能力。

回答思路

  1. 【回答框架 1】跨域请求默认不携带其他域名的Cookie,需在客户端和服务端同时进行配置。首先,前端发送请求时,需将withCredentials属性设置为true,以允许请求携带Cookie。
  2. 【回答框架 2】若使用XMLHttpRequest,需将xhr.withCredentials设为true;若使用fetch,需在请求配置中设置credentials为'include',这是关键步骤。
  3. 【回答框架 3】其次,服务端响应请求时,需设置Access-Control-Allow-Origin为具体域名,不能使用通配符'*',且需设置Access-Control-Allow-Credentials为true,以允许浏览器接受并存储该Cookie。
  4. 【回答框架 4】此外,还需注意Cookie的SameSite属性,若设置为Strict或Lax,可能影响跨域携带,需根据实际情况调整,如设置为None并配合Secure属性。
  5. 【回答框架 5】最后,在跨域请求携带Cookie时,需确保Cookie的域名和路径正确,且请求协议为HTTPS,以保证Cookie的安全传输和有效性。
  6. 【关键点 1】withCredentials需设为true,fetch对应credentials:'include'。
  7. 【关键点 2】服务端Access-Control-Allow-Origin不能为'*',需指定具体域名,且Access-Control-Allow-Credentials为true。
  8. 【关键点 3】Cookie的SameSite属性需调整为None,且配合Secure属性,才能跨域携带。
  9. 【易错点 1】未设置服务端Access-Control-Allow-Credentials或设为false,导致浏览器拒绝携带Cookie。
  10. 【易错点 2】Access-Control-Allow-Origin误用'*',导致Cookie携带失败。
  11. 【易错点 3】SameSite属性未合理设置,浏览器可能阻止跨域携带Cookie。