Couldn't solve Blocked by no cors policy.
I tried everyting that I could to solve cors policy but doesn't seem working.
Here is my worker :
What am I doing wrong here ?
export default {
async fetch(request: Request, env: Env, ctx: ExecutionContext): Promise<Response> {
const url = new URL(request.url);
const key = url.pathname.slice(1);
// // Add CORS headers to the response
const headers = new Headers();
headers.append('Access-Control-Allow-Origin', '*'); // Replace '*' with your actual allowed origin
headers.append('Access-Control-Allow-Methods', 'GET, PUT, DELETE');
headers.append('Access-Control-Allow-Headers', 'Content-Type, X-Custom-Auth-Key');
if (request.method === 'OPTIONS') {
// Handle preflight OPTIONS request
return new Response(null, { headers });
}
if (!authorizeRequest(request, env, key)) {
return new Response(`Unauthorized`, { status: 401 });
}
switch (request.method) {
case 'PUT':
await env.MY_BUCKET.put(key, request.body);
return new Response(`Successfully wrote to ${key}`);
case 'GET':
const object = await env.MY_BUCKET.get(key);
if (object) {
object.writeHttpMetadata(headers);
headers.set('e-tag', object.httpEtag);
return new Response(object.body, { status: 200, headers });
} else {
return new Response(`Object ${key} doesn't exists`, { status: 404 });
}
case 'DELETE':
await env.MY_BUCKET.delete(key);
return new Response(`Successfully deleted ${key}`);
default:
return new Response(`Method ${request.method} not allowed!`, { status: 405, headers: { Allow: 'GET,PUT,DELETE' } });
}
},
};
export default {
async fetch(request: Request, env: Env, ctx: ExecutionContext): Promise<Response> {
const url = new URL(request.url);
const key = url.pathname.slice(1);
// // Add CORS headers to the response
const headers = new Headers();
headers.append('Access-Control-Allow-Origin', '*'); // Replace '*' with your actual allowed origin
headers.append('Access-Control-Allow-Methods', 'GET, PUT, DELETE');
headers.append('Access-Control-Allow-Headers', 'Content-Type, X-Custom-Auth-Key');
if (request.method === 'OPTIONS') {
// Handle preflight OPTIONS request
return new Response(null, { headers });
}
if (!authorizeRequest(request, env, key)) {
return new Response(`Unauthorized`, { status: 401 });
}
switch (request.method) {
case 'PUT':
await env.MY_BUCKET.put(key, request.body);
return new Response(`Successfully wrote to ${key}`);
case 'GET':
const object = await env.MY_BUCKET.get(key);
if (object) {
object.writeHttpMetadata(headers);
headers.set('e-tag', object.httpEtag);
return new Response(object.body, { status: 200, headers });
} else {
return new Response(`Object ${key} doesn't exists`, { status: 404 });
}
case 'DELETE':
await env.MY_BUCKET.delete(key);
return new Response(`Successfully deleted ${key}`);
default:
return new Response(`Method ${request.method} not allowed!`, { status: 405, headers: { Allow: 'GET,PUT,DELETE' } });
}
},
};
1 Reply
I am sending fetch request like this :
const page = () => {
const [file, setFile] = useState<File | undefined>();
const submit = async () => {
const res = await fetch(URI, {
method: "PUT",
body: file,
headers: {
"X-Custom-Auth-Key": "dummy",
},
});
console.log(await res.json());
};
return (
<div>
<input
onChange={(e) => {
if (e.target.files) {
setFile(e.target.files[0]);
}
}}
type="file"
/>
<button onClick={submit}>Submit</button>
</div>
);
};
export default page;
const page = () => {
const [file, setFile] = useState<File | undefined>();
const submit = async () => {
const res = await fetch(URI, {
method: "PUT",
body: file,
headers: {
"X-Custom-Auth-Key": "dummy",
},
});
console.log(await res.json());
};
return (
<div>
<input
onChange={(e) => {
if (e.target.files) {
setFile(e.target.files[0]);
}
}}
type="file"
/>
<button onClick={submit}>Submit</button>
</div>
);
};
export default page;