我正在使用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嵌入到所有请求中。
你可以使用withCredentials属性。
来自不同域的XMLHttpRequest不能为自己的域设置cookie值，除非在发出请求之前将withCredentials设置为true。
axios.get(BASE_URL + '/todos', { withCredentials: true });
此外，还可以对每个Axios请求强制凭据
axios.defaults.withCredentials = true
或者对某些Axios请求使用凭据，如下面的代码所示
const instance = axios.create({
withCredentials: true,
baseURL: BASE_URL
})
instance.get('/todos')
在快速响应中设置必要的标头也很重要。以下是对我有用的方法:
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();
});
TL; diana:
{withCredentials: true}或axios.defaults.withCredentials = true
来自axios文档
withCredentials: false， //默认
withCredentials指示是否应该使用凭据进行跨站点访问控制请求
如果你传递{withCredentials: true}与你的请求，它应该工作。
更好的方法是在axios.defaults中将withCredentials设置为true
axios.defaults.withCredentials = true
如何让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);
所以我也有同样的问题，我花了大约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”密钥。
您可以使用withCredentials属性在请求中传递cookie。
axios.get(`api_url`, { withCredentials: true })
通过设置{withCredentials: true}，您可能会遇到跨起源问题。为了解决这个问题
你需要使用
expressApp.use(cors({ credentials: true, origin: "http://localhost:8080" }));
在这里你可以读到withCredentials
对我有用的是:
客户端:
import axios from 'axios';
const url = 'http://127.0.0.1:5000/api/v1';
export default {
login(credentials) {
return axios
.post(`${url}/users/login/`, credentials, {
withCredentials: true,
credentials: 'include',
})
.then((response) => response.data);
},
};
注意:凭证将是post请求的主体，在这种情况下，用户登录信息(通常从登录表单获得):
{
"email": "user@email.com",
"password": "userpassword"
}
服务器端:
const express = require('express');
const cors = require('cors');
const app = express();
const port = process.env.PORT || 5000;
app.use(
cors({
origin: [`http://localhost:${port}`, `https://localhost:${port}`],
credentials: '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
//在创建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));
