Reactjs 使用Axios withCredentials的标头中没有Cookie:true
我将ReactJS和ExpressJS与jwt一起使用。在我的服务器中,我有这样的cors配置Reactjs 使用Axios withCredentials的标头中没有Cookie:true,reactjs,express,cookies,axios,cross-domain,Reactjs,Express,Cookies,Axios,Cross Domain,我将ReactJS和ExpressJS与jwt一起使用。在我的服务器中,我有这样的cors配置 const corsOptions = { //To allow requests from client origin: true, credentials: true, methods: ['GET', 'PUT', 'POST', 'DELETE'], allowedHeaders: ['Content-Type', 'Authorization', 'Set-Cookie'
const corsOptions = {
//To allow requests from client
origin: true,
credentials: true,
methods: ['GET', 'PUT', 'POST', 'DELETE'],
allowedHeaders: ['Content-Type', 'Authorization', 'Set-Cookie'],
};
export function createNewRequest(data, callback) {
axios.post(`${process.env.REACT_APP_API}/api/requests`, data,
{
withCredentials: true
}).then(res => {
callback(res.data);
})
.catch(err => {
if (err.response) {
if (err.response.status === 403 || err.response.status === 401) {
getToken(createNewRequest(data, callback));
} else {
callback(err.response.data);
}
}
})
}
const corsOptions = {
//To allow requests from client
origin: ['http://localhost:3000'],
credentials: true,
methods: ['GET', 'PUT', 'POST', 'DELETE'],
allowedHeaders: ['Content-Type', 'Authorization', 'Set-Cookie'],
};
在我的客户机中,我像这样向服务器发送请求
const corsOptions = {
//To allow requests from client
origin: true,
credentials: true,
methods: ['GET', 'PUT', 'POST', 'DELETE'],
allowedHeaders: ['Content-Type', 'Authorization', 'Set-Cookie'],
};
export function createNewRequest(data, callback) {
axios.post(`${process.env.REACT_APP_API}/api/requests`, data,
{
withCredentials: true
}).then(res => {
callback(res.data);
})
.catch(err => {
if (err.response) {
if (err.response.status === 403 || err.response.status === 401) {
getToken(createNewRequest(data, callback));
} else {
callback(err.response.data);
}
}
})
}
const corsOptions = {
//To allow requests from client
origin: ['http://localhost:3000'],
credentials: true,
methods: ['GET', 'PUT', 'POST', 'DELETE'],
allowedHeaders: ['Content-Type', 'Authorization', 'Set-Cookie'],
};
在我当地的环境中,我进行了测试,一切正常。但当我部署服务器时,我会尝试从本地客户端向服务器发送请求。服务器不接收标头中的Cookie。
我试过这样设定起源
const corsOptions = {
//To allow requests from client
origin: true,
credentials: true,
methods: ['GET', 'PUT', 'POST', 'DELETE'],
allowedHeaders: ['Content-Type', 'Authorization', 'Set-Cookie'],
};
export function createNewRequest(data, callback) {
axios.post(`${process.env.REACT_APP_API}/api/requests`, data,
{
withCredentials: true
}).then(res => {
callback(res.data);
})
.catch(err => {
if (err.response) {
if (err.response.status === 403 || err.response.status === 401) {
getToken(createNewRequest(data, callback));
} else {
callback(err.response.data);
}
}
})
}
const corsOptions = {
//To allow requests from client
origin: ['http://localhost:3000'],
credentials: true,
methods: ['GET', 'PUT', 'POST', 'DELETE'],
allowedHeaders: ['Content-Type', 'Authorization', 'Set-Cookie'],
};
并尝试使用凭据设置默认值
axios.defaults.withCredentials = true;
但这些都不管用。有人能解释一下我做错了什么并帮我解决这个问题吗试着允许
app.use(cors())代码>像这样没有选项(允许一切)。
代码示例:
app.use(cors());
app.use(bodyParser.json({origin:https://famegoal.com/" }));
应用程序使用(“/函数”,couponRoutes);
猫鼬
.连接(
`mongodb+srv://${process.env.DB_USER}:${process.env.DB_PASSWORD}@cluster0.qvs4c.mongodb.net/${process.env.DB_NAME}?retryWrites=true&w=maist`
)
.然后(()=>{
应用程序集(“端口”,process.env.port | | 5000);
app.listen(app.get(“端口”),函数(){
console.log(“节点应用程序正在端口上运行”,app.get(“端口”);
});
})
.catch((错误)=>{
控制台日志(err);
});代码>在app.js中设置以下中间件,如下所示
app.use(函数(请求、恢复、下一步){
res.header('Content-Type','application/json;charset=UTF-8')
res.header('Access-Control-Allow-Credentials',true)
res.header(
“访问控制允许标头”、“来源、X请求、内容类型、,
接受
)
下一个()
});
在reactjs中使用with credentials:true
我首先尝试了这一点,由于CORS策略,请求被阻止,因此我需要指定CORS选项