我正在使用Axios从客户端向Express.js服务器发送请求。
我在客户机上设置了一个cookie,我希望从所有Axios请求中读取该cookie,而不需要手动将它们添加到请求中。
这是我的客户端请求示例:
axios.get(`some api url`).then(response => ...
我试图通过在Express.js服务器中使用这些属性来访问头文件或cookie:
req.headers
req.cookies
它们都没有包含任何cookie。我使用cookie解析器中间件:
app.use(cookieParser())
如何让Axios在请求中自动发送cookie ?
编辑:
我在客户端设置cookie是这样的:
import cookieClient from 'react-cookie'
...
let cookie = cookieClient.load('cookie-name')
if(cookie === undefined){
axios.get('path/to/my/cookie/api').then(response => {
if(response.status == 200){
cookieClient.save('cookie-name', response.data, {path:'/'})
}
})
}
...
虽然它也使用Axios,但它与问题无关。我只是想在设置cookie后将cookie嵌入到所有请求中。
TL; diana:
{withCredentials: true}或axios.defaults.withCredentials = true
来自axios文档
withCredentials: false, //默认
withCredentials指示是否应该使用凭据进行跨站点访问控制请求
如果你传递{withCredentials: true}与你的请求,它应该工作。
更好的方法是在axios.defaults中将withCredentials设置为true
axios.defaults.withCredentials = true
这招对我很管用:
首先,我必须使用自定义配置创建一个axios的新实例
然后,我使用该axios实例发出post请求
参见下面的代码:
const ax = axios.create({
baseURL: 'yourbaseUrl',
withCredentials: true,
});
const loginUser = () => { const body ={username:state.values.email, password:state.values.password};
ax.post('/login',body).then(function(response){
return response}).then().catch(error => console.log(error));}
来源:
https://www.npmjs.com/package/axios#creating-an-instance
在快速响应中设置必要的标头也很重要。以下是对我有用的方法:
app.use(function(req, res, next) {
res.header('Access-Control-Allow-Origin', yourExactHostname);
res.header('Access-Control-Allow-Credentials', true);
res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
next();
});