Axios and Cookie Operation

本文探讨了使用Axios进行跨域请求时的操作Cookie方法,包括设置与获取Cookie的具体实现,以及服务器端如何配置以支持CORS。通过示例代码展示了如何在Node.js客户端上正确读取和设置Cookie。
Axios and Cookie Operation

My current service, response with the headers as follow:
Connection: keep-alive
Content-Language: en
Content-Length: 274
Content-Type: application/json; charset=utf-8
Date:
Server: Apache
Vary: Authorization, Accept-Language, Cookie

The Demo Header Service is as follow, the URL is http://httpbin.org/headers
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: *
Connection: keep-alive
Content-Length: 528
Content-Type: application/json
Date:
Server: gunicorn/19.9.0
Via: 1.1 vegur

Some Keep Details about operations on Cookie from Axios
Some sample is as follow:
axios.request({
method: "get",
url: uri,
headers: headers,
params: params,
maxRedirects: 0,
validateStatus: function(status) {
return status >= 200 && status < 303;
},
withCredentials: true,
}).then(response => {
console.log("cookie:" + response.headers["set-cookie"]);
return resolve(response.data);
}).catch((error:any) => {
console.error(error);
return reject();
});
});
}

https://stackoverflow.com/questions/36365409/setting-cookies-with-cors-requests
On the server side, it should support these:
res.writeHead(200, {
’Set-Cookie’: ‘’,
‘Access-Control-Allow-Origin’: ‘http://sillycat.ddns.net:8383',
‘Access-Control-Allow-Credentials’: ’true’,
‘Access-Control-Allow-Methods’: ‘GET, POST’,
‘Access-Control-Allow-Headers’: ‘Content-Type, Set-Cookie, *'
});

In general, if the server side does not support CORS, the nodeJS client can not get the headers[’set-cookie’]. The browser can, postman can, but I fails to do that in NodeJS client without CORS.

References:
https://stackoverflow.com/questions/48846653/get-cookie-from-axios-response-using-cors-on-the-server-side
https://github.com/axios/axios/issues/92
https://github.com/axios/axios/issues/295
https://github.com/axios/axios/issues/953
https://stackoverflow.com/questions/48846653/get-cookie-from-axios-response-using-cors-on-the-server-side
<think>我们参考了多个引用资料,特别是引用[2]和引用[3]中详细描述了axios库的属性(或称为配置项)。 引用[2]提到了axios.defaults.timeout, axios.defaults.headers, axios.defaults.baseURL等默认属性配置。 引用[3]则总结了axios的优点,其中也隐含了一些属性(如拦截器、自动转换JSON等)。 axios库的属性(配置项)非常丰富,以下是一些常用属性: 1. **url**:请求的服务器URL(必需,除非在配置中设置了baseURL) 2. **method**:请求方法,默认为'get' 3. **baseURL**:将自动加在url前面,除非url是绝对URL。通过它可以为axios实例的方法传递相对URL(引用[2]示例) 4. **headers**:自定义请求头,例如设置token(引用[2]示例) 5. **params**:与请求一起发送的URL参数,必须是普通对象或URLSearchParams对象 6. **data**:作为请求主体发送的数据,适用于PUT, POST, PATCH等请求方法 7. **timeout**:指定请求超时的毫秒数(引用[2]示例) 8. **responseType**:表示服务器响应的数据类型,可选值有'arraybuffer', 'document', 'json', 'text', 'stream'(浏览器专属),'blob'(浏览器专属),默认为'json' 9. **withCredentials**:表示跨域请求时是否需要使用凭证(如cookies) 10. **auth**:表示应该使用HTTP基础验证,并提供凭据(如:{ username: 'janedoe', password: 's00pers3cret' }) 11. **cancelToken**:指定用于取消请求的cancel token 另外,axios还提供了一些全局默认配置(通过axios.defaults设置),以及创建自定义实例(axios.create(config))的能力(引用[2])。 除了请求配置,axios还支持拦截器(interceptors)属性(引用[3]和引用[4]): - 请求拦截器:在请求发送前做一些处理(如添加token) - 响应拦截器:在响应到达then/catch前做一些处理(如预处理响应数据或错误) 示例配置: ```javascript // 设置默认配置 axios.defaults.baseURL = 'https://api.example.com'; axios.defaults.timeout = 5000; axios.defaults.headers.common['Authorization'] = AUTH_TOKEN; // 创建一个自定义实例 const instance = axios.create({ baseURL: 'https://api.example.com', timeout: 2000, headers: {'X-Custom-Header': 'foobar'} }); ``` 注意:引用[4]提到在处理响应时,为了避免因为某些接口返回数据可能没有预期结构而导致的错误,可以使用可选链操作符(?.)来安全访问属性。 以上是axios库的主要属性(配置项)总结。 §§相关问题§§ 1. 如何为axios请求设置请求头(headers)? 2. axios拦截器如何使用?请给出请求和响应拦截器的示例。 3. 在axios中如何取消一个请求? 4. 如何利用axios.defaults设置全局默认配置? 5. axios的响应数据结构是怎样的? </think>### Axios库常用属性详解 Axios库提供了丰富的配置属性,以下是最常用的核心属性及其说明(基于引用资料): 1. **baseURL** - 设置基础URL前缀,自动拼接在相对URL前 - 示例:`axios.defaults.baseURL = 'http://localhost:5000'`[^2] 2. **timeout** - 请求超时时间(毫秒),超时自动取消请求 - 示例:`axios.defaults.timeout = 2000`[^2] 3. **headers** - 自定义请求头,常用于传递认证信息 - 示例: ```javascript axios.defaults.headers = { token: 'd87dgyaohildjdodsdasadmlsa' }[^2] ``` 4. **params** - URL查询参数(GET请求专用),自动拼接到URL - 示例: ```javascript axios.get('/user', { params: { ID: 12345 } }) ``` 5. **data** - 请求体数据(POST/PUT等请求专用) - 支持JSON自动转换 - 示例: ```javascript axios.post('/user', { firstName: 'Fred', lastName: 'Flintstone' }) ``` 6. **responseType** - 响应数据类型(默认json- 可选值:`json`, `text`, `arraybuffer`, `blob`等 7. **withCredentials** - 跨域请求是否携带Cookie(默认false) - 示例:`axios.defaults.withCredentials = true` 8. **cancelToken** - 请求取消令牌,用于中止请求 - 示例: ```javascript const source = axios.CancelToken.source(); axios.get('/user', { cancelToken: source.token }) source.cancel('Operation canceled'); ``` 9. **validateStatus** - 自定义HTTP状态码有效性验证 - 示例: ```javascript validateStatus: function (status) { return status >= 200 && status < 300; // 默认规则 } ``` 10. **transformRequest/transformResponse** - 请求/响应数据转换钩子 - 示例: ```javascript transformRequest: [ (data) => JSON.stringify(data) ], transformResponse: [ (data) => JSON.parse(data) ] ``` --- ### 特殊用法 - **拦截器(Interceptors)** 请求/响应拦截处理(引用[3][^4]): ```javascript // 请求拦截器 axios.interceptors.request.use(config => { config.headers.token = 'new_token'; return config; }); // 响应拦截器(安全访问示例) axios.interceptors.response.use(response => { const token = response?.data?.token; // 使用?.避免undefined错误 return response; }); ``` - **创建独立实例(create)** 生成带有自定义配置的Axios实例(引用[2][^2]): ```javascript const api = axios.create({ baseURL: 'https://api.example.com', timeout: 5000 }); ``` ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值