问题是我从后端获取cookie，该后端与前端的来源不同。而且我无法让 cors 与我一起工作。我正在使用带有 elysia 的小圆面包。
这是我为缩小问题范围而制作的示例。
前端将创建两个我想传递给后端的cookie。然后他们会注意到并创建一个新的 cookie 并将其发送到前端。如果来源相同，则此方法有效。因此，如果您转到 localhost 1234 并在开发人员工具中自己创建用户名和密码 cookie，它就可以工作了
正如预期的那样。
我尝试在获取中包含标头“Content-Type”：“application/json”和凭证：“include”。
后端
import Elysia from "elysia";
import cors from "@elysiajs/cors";
const app = new Elysia();
app.use(cors());
app.post("/cookies", ({ cookie: { username, password, icecream } }) => {
icecream.value = "chocolate";
console.log(username + ":" + password);
});
app.listen(1234);
console.log("Server up and running at http://localhost:1234");
前端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="post">
<input type="text" placeholder="username" name="username">
<input type="text" placeholder="password" name="password">
<button>submit</button>
</form>
<script>
document.querySelector("form").addEventListener("submit", (e) => {
e.preventDefault();
console.log("submitting");
document.cookie = `username=${document.querySelector("input[name='username']").value}`;
document.cookie = `password=${document.querySelector("input[name='password']").value}`;
fetch("http://localhost:1234/cookies", {
method: "POST",
headers: {
'Content-Type': 'application/json'
},
credentials: "include"
})
.then((response) => {
console.log(response);
});
})
</script>
</body>
</html>
您在尝试从前端向托管在不同来源的后端发出请求时似乎遇到了 CORS 问题。首先，您需要在后端设置 CORS 在后端代码中，确保正确配置 CORS 以允许来自前端源的请求。您已经在使用 @elysiajs/cors 中间件，但需要在 CORS 配置中指定允许的来源。 您可以通过将选项对象传递给 cors() 函数来完成此操作
import Elysia from "elysia";
import cors from "@elysiajs/cors";
const app = new Elysia();
app.use(cors({
origin: "http://localhost: 1234"
}));
然后确保凭据包含在获取请求中
fetch("http://localhost:1234/cookies", {
method: "POST",
headers: {
'Content-Type': 'application/json'
},
credentials: "include"
})
.then((response) => {
console.log(response);
});
如果您的前端和后端托管在不同的源上，浏览器可能会首先发送预检 OPTIONS 请求以检查服务器是否允许实际请求。确保您的后端使用适当的 CORS 标头正确响应 OPTIONS 请求。
例如，您可以添加一个路由处理程序来响应带有必要 CORS 标头的 OPTIONS 请求
app.options("*", cors());通过这些更改，您的前端应该能够向后端发出请求，而不会遇到 CORS 问题。确保将
http://localhost:YOUR_FRONTEND_PORT