The example code underneath should fetch cookies from my backend thats on a different origin than my front end. However i get a error "Access to fetch at 'http://localhost:1234/cookies' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response." However if i understand the doc correct elysia-cors should allow it by default.
This is a example i made to narrow down the problem
Frontend
Open with live server - VS code
<!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: "GET",
mode: "cors",
headers: {
'Content-Type': 'application/json'
},
credentials: "include"
})
.then((response) => {
console.log(response);
});
})
</script>
</body>
</html>
Backend
import Elysia from "elysia";
import cors from "@elysiajs/cors";
const app = new Elysia();
app.use(
cors({
origin: true,
methods: "*",
allowedHeaders: "*",
exposedHeaders: "*",
credentials: true,
maxAge: 50000,
preflight: true,
})
);
app.get("/cookies", ({ cookie: { username, password, icecream } }) => {
icecream.value = "chocolate";
console.log(username + ":" + password);
return "you got me!";
});
app.listen(1234);
console.log("Server up and running at http://localhost:1234");
In addition to whats is shown here i have tried
app.options("*", cors());- To use firefox (my default is chrome )
- Fetching the local network address
Dependancies
─ @elysiajs/cors@0.8.0
├── bun-types@1.0.26
└── typescript@5.3.3
The example code underneath should fetch cookies from my backend thats on a different origin than my front end. However i get a error "Access to fetch at 'http://localhost:1234/cookies' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response." However if i understand the doc correct elysia-cors should allow it by default.
This is a example i made to narrow down the problem
Frontend
Open with live server - VS code
Backend
In addition to whats is shown here i have tried
app.options("*", cors());Dependancies
─ @elysiajs/cors@0.8.0
├── bun-types@1.0.26
└── typescript@5.3.3