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


当前回答

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

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

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

其他回答

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

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标志。

所以我也有同样的问题,我花了大约6个小时去寻找,我有

withCredentials:真

但是浏览器仍然没有保存cookie,直到出于某种奇怪的原因,我才想到重新调整配置设置:

Axios.post(GlobalVariables.API_URL + 'api/login', {
        email,
        password,
        honeyPot
    }, {
        withCredentials: true,
        headers: {'Access-Control-Allow-Origin': '*', 'Content-Type': 'application/json'
    }});

似乎你应该总是先发送“withCredentials”密钥。

在尝试了2天之后,在尝试了这里的建议之后,这对我来说是有效的。

表达: Cors: Cors ({origin: "http:127.0.0.1:3000", credentials: true,}) Cookie:确保您的Cookie具有secure: true, sameSite: "None" 前端(反应)

axios.defaults.withCredentials = true; (withCredentials: true不适合我)到您请求cookie的地方以及您发送cookie的地方(GET/POST)

希望这也能帮助到其他人。

如何让Axios在请求中自动发送cookie ?

set axios.defaults.withCredentials = true;

或者对于某些特定的请求,您可以使用axios.get(url,{withCredentials:true})

如果你的“Access-Control-Allow-Origin”设置为,这将给出CORS错误 通配符(*)。 因此,请确保指定请求的原始url

例如:如果您的前端使请求运行在localhost:3000上,则将响应头设置为

res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');

res.setHeader('Access-Control-Allow-Credentials',true);