CORS issue even when CORS header are added
My workers script with d1 binding, and '/api/view/customers_data' on GET request is succesful but sending POST request with body to '/api/add/customer' giving error
Fetch request
const response = await fetch(
"https://xxxx.xxxxx.workers.dev/api/add/customer",
{
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
id: xxx,
cabin: xxxx,
name: xxxx
},)
}
);
// Workers Script
export default {
async fetch(request, env, ctx) {
const corsHeaders = {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Headers': '*',
'Access-Control-Allow-Methods': 'GET, POST',
};
const { pathname } = new URL(request.url);
try {
if (pathname === "/api/view/customers_data") {
const results = await env.DB.prepare(
"SELECT * FROM customers_data "
).all();
return new Response(JSON.stringify(results), {
headers: corsHeaders,
});
}else if (pathname === "/api/add/customer") {
const body = await request.json();
const results = await env.DB.prepare(
"INSERT INTO customers_data (cabin, name, email, phone, gender) VALUES(?1, ?2, ?3, ?4, ?5)"
).bind(body.cabin, body.name, body.email, body.phone, body.gender).run();
return new Response(JSON.stringify(results), {
headers: corsHeaders,
}); }
} catch (e) {
return Response.json(e);
}
});
}
};
//Error
Access to fetch at 'https://xxx.xxxx.workers.dev/api/add/customer' from origin 'http://localhost:3001' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.5 Replies
do you see any errors in the worker metrics page?
only thing i can think of is that the code path for the POST request is throwing an error, therefore your response with the proper CORS headers isn't making it through
if you
curl -v the endpoint what response do you see?
should show headers as wellI expect you aren't responding to OPTIONS requests here
In order to make CORS work, you need to reply with the headers on both OPTIONS and POST requests.
The OPTIONS request is sent before the POST (preflight) and the response doesn't matter (it can just be a 200 with a body of OK), but the headers matter
Side note: I'd also recommend checking the method before you handle a request, otherwise you'd try (and fail) to handle GET requests where there is no body.
I dont see any error in dashboard metrics. I tried to curl via terminal and postman, both resulted in success but when I do fetch(), i see this cors issue. And also I tried curl -v with POST, and it shows headers with success.
Tried to send OPTIONS request and POST request, same cors issue
It's not that you need to send the OPTION request. The browser does it automatically.
You need to respond to the OPTION request with the headers.
I added code to respond OPTIONS request with headers and it worked.
But the other thing, I noticed is that it is throwing CORS issue when I sent in fetch body, a text when database schema is expecting number like ' phone:"abc" ' , which should as per me should be database error, not cors error. Is it common