使用axios POST方法设置Cookie时,不会存储Cookie

e4eetjau  于 2022-11-05  发布在  iOS
关注(0)|答案(1)|浏览(266)

我正在尝试 * 写入 * 和 * 读取 * cookie,但遇到了下面的问题。
这是我的基本服务器端:

服务器.js

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

import routes from '...';
app.use("/foo", routes);

app.listen(8888);

路由.js

const routes = express.Router();
routes.post('/', (req, res) => {
    res.cookie("myFoo", "abcd");
    res.send("Cookie added");
    }
});

routes.get('/', (req, res) => {
    res.send(req.cookies.myFoo);
    }
});
export default routes;

和我的客户端在“http://localhost:3000”。
我执行两个HTTP请求

POST http://localhost:8888/foo
GET http://localhost:8888/foo

得到的响应正是我所期望的abcd。而且,cookie也存在于浏览器标签应用程序〉cookie中。
在客户端中使用axios时出现的问题。

const api = axios.create({
    baseURL: "http://localhost:8888/foo"
});

async function setCookie(object) {
    return api.post("/", object)
    .then((res) => {
        return res;
    });
}

function getCookie() {
    return api.get("/")
    .then((res) => {
        return res;
    });
}

setCookie({})
.then((res) => {
    getCookie();
})

api.post()正常运行,头响应Set-Cookie正确,但浏览器选项卡Application〉Cookie中的Cookie为空,并且api.get()获得undefined
我确实尝试过将服务器端的res.cookie()或 *set cookie作业 * 移动到GET路由,它在HTTPaxios上都有效

routes.get('/', (req, res) => {
    res.cookie("myFoo", "abcd");
});

tldr:在HTTP POST方法中设置cookie可以正常工作,但当客户端使用axios进行调用时,它会导致问题。
你能告诉我为什么会这样吗?哪个代码部分出错了,导致我陷入这种境地?

q3qa4bjr

q3qa4bjr1#

Cookie仅在以下情况下用于跨源 AJAX 请求:

  • 客户要求使用它们
  • 服务器赠款跨源使用它们的权限

因此,您需要更改客户端代码以请求它们:

const api = axios.create({
    baseURL: 'http://localhost:8888/',
    withCredentials: true,
});

和授予权限的服务器代码(请注意,您不能同时使用凭据和起源的通配符)。

app.use(cors({ 
    origin: 'http://localhost:3000', 
    credentials: true 
}));

相关问题