我正在使用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嵌入到所有请求中。


当前回答

在快速响应中设置必要的标头也很重要。以下是对我有用的方法:

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();
});

其他回答

另一个解决方案是使用这个库:

https://github.com/3846masa/axios-cookiejar-support

它将“Tough Cookie”支持集成到Axios中。注意,这种方法仍然需要withCredentials标志。

就我而言,问题出在cookie上,而不是Axios;虽然我接收和发送cookie从/到相同的域/子域/主机,我期望它在不同的路径上使用不同的资源-但我的cookie就像我已经设置了一个单一的路径,即使我省略了这个属性。显式地设置Path=/;在饼干里解决了这个问题。

在快速响应中设置必要的标头也很重要。以下是对我有用的方法:

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();
});

对于任何这些解决方案都不起作用的人,请确保您的请求源等于您的请求目标,请参阅github问题。

简而言之,如果您在127.0.0.1:8000访问您的网站,那么请确保您发送的请求是针对127.0.0.1:8001的服务器,而不是localhost:8001,尽管理论上可能是相同的目标。

对于那些仍然无法解决这个问题的人,这个答案帮助了我。 Stackoverflow回答:34558264

TLDR; 我们需要在两个axios的GET请求和POST请求(获取cookie)以及fetch中设置{withCredentials: true}。