前端跨域携带cookie的方式以及需要注意的点

前端

2024-02-02 19:58:53

在Web开发中，前端代码常因安全性原因无法直接访问不同源的数据。其中一项常见需求是通过AJAX请求从不同的源获取数据并携带Cookie。此过程涉及CORS（Cross-Origin Resource Sharing）策略的使用和设置。

设置允许携带Cookie的响应头

服务器需要配置响应头以允许跨域请求携带Cookie，主要用到的两个HTTP头部是Access-Control-Allow-Credentials和Access-Control-Allow-Origin。

Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: <origin>

其中<origin>应具体指向请求源域名或使用通配符星号(*)。但要注意，如果设置为*，则无法与Access-Control-Allow-Credentials: true同时工作。

将请求的Origin域名加入目标域名白名单

开发人员需要确保目标服务器配置了跨域资源共享（CORS）策略，并在响应头中指定允许携带Cookie的源。这意味着你需要将前端应用的域名添加到后端服务的白名单里。

例如，如果一个网站通过https://example.com发送请求，那么后端应当返回如下响应头：

Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Credentials: true

使用XMLHttpRequest对象携带Cookie

在使用传统的XMLHttpRequest进行跨域请求时，可以通过设置withCredentials属性为true来允许携带认证信息（如Cookie）。

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data');
xhr.withCredentials = true;
xhr.onload = function() {
    if (xhr.status === 200) console.log(xhr.responseText);
};
xhr.send();

使用fetch API携带Cookie

使用fetch()方法时，可以通过设置请求选项中的credentials属性来携带认证信息。将此值设为'include'即可。

fetch('https://api.example.com/data', {
    method: 'GET',
    credentials: 'include'
}).then(response => response.text())
  .then(data => console.log(data));

使用axios库携带Cookie

若项目中引入了axios，可以通过设置请求配置中的withCredentials属性来实现。这同样适用于其他支持跨域请求的HTTP客户端。

axios.get('https://api.example.com/data', {
    withCredentials: true,
}).then(response => console.log(response.data))
  .catch(error => console.error(error));