vue在接口请求时如何携带cookie
时间: 2023-12-31 12:03:31 浏览: 30
在 Vue 中进行接口请求时,可以通过设置请求头来携带 cookie。可以使用 Axios 库来发送请求,并在请求头中添加 cookie。
下面是一个示例代码:
```javascript
import axios from 'axios';
// 在发送请求前设置请求头
axios.defaults.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('token');
axios.defaults.headers.common['Content-Type'] = 'application/json';
// 发送 GET 请求,携带 cookie
axios.get('/api/endpoint', { withCredentials: true })
.then(response => {
// 处理响应数据
})
.catch(error => {
// 处理错误
});
// 发送 POST 请求,携带 cookie
axios.post('/api/endpoint', data, { withCredentials: true })
.then(response => {
// 处理响应数据
})
.catch(error => {
// 处理错误
});
```
在上述代码中,使用 `axios.defaults.headers.common` 设置了请求头的 `Authorization` 和 `Content-Type`,可以根据实际需求进行修改。`withCredentials: true` 表示在发送请求时携带 cookie。
请注意,服务器端也需要正确设置响应头,允许跨域请求和携带 cookie。在服务端的响应头中应包含以下字段:
```
Access-Control-Allow-Origin: http://yourdomain.com
Access-Control-Allow-Credentials: true
```
其中,`http://yourdomain.com` 是指允许的请求来源。