让Axios在请求中自动发送cookie

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

当前回答

//在创建axios实例时使用

const API = axios.create({
    baseURL: "http://localhost:4000", // API URL
    withCredentials: true,
});

//在后台的app.js中使用这个中间件首先，安装NPM I cors

var cors = require("cors"); // This should be at the end of all middlewares

const corsOptions = {
    origin: "http://localhost:3000",
    credentials: true, //access-control-allow-credentials:true
    optionSuccessStatus: 200,
};

app.use(cors(corsOptions));

2022-08-16 02:06:29

其他回答

我不熟悉Axios，但据我所知，在javascript和ajax中有一个选项

withCredentials: true

这将自动将cookie发送到客户端。例如，这个场景也是用passportjs生成的，它在服务器上设置了一个cookie

2017-04-08 10:03:01

你把两种想法混在一起了。

有react-cookie和axios

React-cookie =>用于在客户端处理cookie

Axios =>用于向服务器发送ajax请求

有了这些信息，如果您希望来自客户端的cookie也能在后端进行通信，则需要将它们连接在一起。

来自"react-cookie" Readme的注释:

同构饼干! 为了能够在执行服务器呈现时访问用户cookie，您可以可以使用plugToRequest或setRawCookie。

链接到readme

如果这是你需要的，很好。

如果没有，请评论，以便我可以详细说明。

2017-04-05 10:18:40

如何让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);

2019-05-18 10:51:39

在package.json(Frontend)中设置代理，并重新启动服务器(问题解决)

2023-01-06 06:59:25

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

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

2018-01-12 17:36:26

让Axios在请求中自动发送cookie

推荐文章

最新文章

标签