vue请求携带cookie与预检请求处理方案

本文介绍如何使用前端axios和后端PHP实现携带Cookie的跨域请求。通过设置withCredentials及后端响应头来允许特定域名的跨域访问,并介绍了预检请求的有效期设置。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

携带cookie发起请求

前端axios设置:

withCredentials:true

后端设置(PHP)

// 设置身份检测
header('Access-Control-Allow-Credentials:true');
// 设置指定访问域名
header('Access-Control-Allow-Origin:http://xxx.com');

同时,由于可能存在多域名访问的情况,可以先作判断再设置

// 设置允许访问的域名数组
$allow_origin = array(  
    'http://epic.biransign.com',  
    'http://betaepic.biransign.com' 
);
 
if(in_array($origin, $allow_origin)){  
    header('Access-Control-Allow-Origin:'.$origin);  
}

预检请求

后端设置(PHP)

// 指定本次预检请求的有效期(单位:秒)
header('Access-Control-Max-Age:3600');

 

### 解决 Vue3 中浏览器禁止设置 Cookie 的问题 在开发过程中遇到浏览器拒绝设置来自前端请求中的 `Set-Cookie` 响应头的情况,通常是因为同源策略 (Same-Origin Policy) 和其他安全机制所致。对于此类情况有几种常见处理方式: #### 使用 HTTPS 协议 确保前后端通信采用HTTPS协议而非HTTP。现代浏览器对非加密连接下的 cookie 设置有着严格限制,尤其是当涉及到标记为 Secure 属性的 cookies 时[^1]。 #### 配置正确的 Set-Cookie 参数 服务器返回给客户端的 `Set-Cookie` 头部应当包含必要的属性以满足浏览器的安全需求。例如: - **Secure**: 表明此 cookie 应仅通过 HTTPS 连接传输。 - **HttpOnly**: 防止 JavaScript 访问该 cookie, 减少 XSS 攻击风险。 - **SameSite=None; Secure**: 对于跨站请求来说非常重要,在某些情况下如果不显式指定这个参数,则默认行为可能会阻止第三方上下文中发送带有 cookie请求。 ```http Set-Cookie: sessionId=abc123; Domain=.example.com; Path=/; HttpOnly; Secure; SameSite=None; ``` #### 后端配置 CORS 正确响应头部 为了使预检 OPTIONS 请求能够成功并允许实际请求携带凭证(cookies),需确保后端正确设置了如下CORS相关响应头: - Access-Control-Allow-Origin: https://frontend.example.com (具体域名) - Access-Control-Allow-Credentials: true - Access-Control-Allow-Methods: POST, GET, PUT, DELETE, PATCH, OPTIONS - Access-Control-Max-Age: 86400 注意这里 Origin 必须是一个具体的 URL 而不是通配符 * ,因为后者不允许 credentials=true 的设定。 #### 客户端发起 AJAX 请求时启用 withCredentials 如果使用 Axios 发起 HTTP 请求的话,记得开启 `withCredentials` 选项以便告知浏览器随附身份验证信息(如 Cookies)到目标站点上。 ```javascript axios.get('https://api.example.com/data', { withCredentials: true, }); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值