Question

我正在尝试使用JavaScript中的Axios发出http发布请求。该请求工作正常，但后来我尝试使用cookie。作为我的后端，我在http://localhost:8000使用Express / Nodejs服务器，而我的前端是http://localhost:3000上的反应npm测试服务器。

我的后端看起来像这样：

const express = require('express');
const cookieparser = require('cookie-parser');
const cors = require('cors');

const app = express();
app.use(cookieparser());
app.use(cors());

app.post("/request/status/check", (req, res) => {
    if(req.cookies.gitEmployee != null){
        res.status(200).send({res: 1, employeeName: req.cookies.gitEmployee.username, fullname: req.cookies.gitEmployee.fullname});
    } else if(req.cookies.gitCompany != null){
        res.status(200).send({res: 2, companyName: req.cookies.gitCompany.companyName, fullname: req.cookies.gitCompany.fullname});
    }else{
        res.status(200).send({res: 0});
    }
});

app.post("/request/testcookie", (req, res) => {
    res.cookie("gitEmployee", null);
    res.cookie("gitEmployee", {
        username: "testusername",
        fullname: "Test Username"
    }).send({res: 1});
});

所以，作为一个简短的描述：我通过向http://localhost:8000/request/testcookie发布请求来设置测试cookie。响应应该是res = 1的JSON对象。另外，我试图通过向http://localhost:8000/request/status/check发送请求来获取cookie中的信息。在这种情况下，响应应该是对象{res:1 , employeeName: "testusername", fullname: "Test Username"}。

我使用名为Insomnia的REST客户端（类似Postman）尝试了这个概念，它运行得很好。

然后我为我的React应用程序编写了一个帮助类，对于我正在使用Axios的Http请求。

import axios from 'axios';

class manageMongo {
    authstate(){
        return new Promise((resolve, reject) => {
            axios("http://localhost:8000/request/status/check", {
                method: "post",
                data: null,
                headers: {
                    "Access-Control-Allow-Origin": "*"
                },
                withCredentials: true
            })
            .then(res => {
                    console.log(res.data);
                    if(res.data.res === 0){
                        resolve(false);
                    }
                    if(res.data.res === 1){
                        resolve(true);
                    }
                    if(res.data.res === 2){
                        resolve(true);
                    }
            });   
        });
    }
    setTestCookie(){
        axios("http://localhost:8000/request/testcookie", {
            method: "post",
            data: null, 
            headers: {"Access-Control-Allow-Origin": "*"},
            withCredentials: true
        })
        .then(res => { console.log(res)});
    }
}
export default manageMongo.prototype;

当我执行这些函数时，我得到了两个函数的相同错误（当然使用不同的url）：

无法加载http://localhost:8000/request/testcookie：响应预检请求不通过访问控制检查：的值响应中的“Access-Control-Allow-Origin”标头不能是当请求的凭据模式为'include'时，通配符'*'

我已经知道这是因为请求中的withCredentials设置。我添加了这些设置，因为我想通过这些请求传递Cookie，如果我不添加withCredentials，/request/status/check请求始终返回{res: 0}，即使我之前设置了Cookie 。

我不知道，如果我设置withCredentials = true这会改变但是我在多个线程中读取它。如果您知道其他工作方法即使没有axios也可以通过这些请求传递Cookie，请在此处分享！因为那就是我想要实现的目标。

Answer 1

问题似乎是你已经设定好了 'Access-Control-Allow-Origin'：* 例如，尝试将其设置为您的实际原点 'Access-Control-Allow-Origin'：'http://localhost:8000' 要么 'Access-Control-Allow-Origin'：'http://localhost:3000'

无论请求来自何处。

Axios HTTP请求返回错误（Access-Control-Allow-Origin）

1 个答案: