javascript - 如何使用包含凭据的提取和 POST 请求发送数据？

Question

我想使用 fetch 从端口 3000 上的 React 前端向 3005 上的 node.js 服务器发送一些 JSON 格式的数据。我在服务器上配置了 cors，但每次我尝试使用 cookie 发送请求时， Chrome 抛出错误:

Access to fetch at 'http://localhost:3005/user-connected' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.

所有来自服务器代码的 console.log 都被跳过。

当我在获取代码中删除 header 时

"Content-Type", "application/json"

我收到 cookie，但没有数据。包含此 header 但没有凭据:“include”，我可以获得我的数据，但我永远不会同时获得两者。

这是我的获取代码:

fetch("http://localhost:3005/user-connected", {
            mode: "cors",
            method: "post",
            headers: [
                ["Content-Type", "application/json"],
            ],
            credentials: "include",
            body: JSON.stringify({data: "123"})
        })
            .then(data => data.json())
            .then((data) => {
               console.log(`Response: ${JSON.stringify(data)}`);
            }).catch(err => {
                console.log(`Error: ${err}`)
        });

Node.js cors 配置:

app.use(cors({credentials: true}));

app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
  res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,Content-Type', 'Access-Control-Allow-Origin', 'Origin');
  res.setHeader('Access-Control-Allow-Credentials', true);
  next();
});

还有我的发帖路线:

let cookiesData = (req, res) => {
  console.log(`Cookie user-connected: ${req.cookies.io}`)


  console.log(`Received data: ${JSON.stringify(req.body)}`);
  res.send({ status: "OK" });
}

router.post("/user-connected", cors({origin: 'http://localhost:3000'}), cookiesData);

有没有可能做我想做的事？还是我错过了一些重要的配置？

Answer 1

您需要在 post 方法的获取请求中传递这样的 header :

{
  credentials: 'include',
  mode: 'cors',
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
}

您必须确保您已授予访问权限 allow origin for localhost:3000