[英]No 'Access-Control-Allow-Origin' header is present error from JS to Cloudflare Workers
I have an edge function in Javascript on Cloudflare Workers.我在 Cloudflare Workers 的 Javascript 中有优势 function。 The only thing it does is to check a specific header and return a JSON containing a value accordingly它唯一要做的就是检查一个特定的 header 并返回一个包含相应值的 JSON
See code below请参阅下面的代码
async function handleRequest(request) {
const url = new URL(request.url);
const psk_db = await KV_STORAGE.get(request.headers.get(PRESHARED_AUTH_HEADER_KEY));
if (psk_db === null) {
return new Response("Access denied", { status: 404 });
}
else{
//calculate number
//return JSON
const data = {
pswd: psk_db,
};
json = JSON.stringify(data, null, 2);
}
return new Response(json, {
headers: {
'content-type': 'application/json;charset=UTF-8',
'Access-Control-Allow-Origin': url.origin,
},
})
}
addEventListener('fetch', event => {
event.respondWith(handleRequest(event.request));
});
Now, the function works fine on the cloudflare test envirovment but when I try to request from an html page with a button that run this javascript function Now, the function works fine on the cloudflare test envirovment but when I try to request from an html page with a button that run this javascript function
function RequestCode() {
const Http = new XMLHttpRequest();
const url = "https://code-return.dev-malv.workers.dev";
Http.open("GET", url);
Http.setRequestHeader("Access-Control-Allow-Origin", "*");
Http.setRequestHeader("X-Custom-PSK", "m_custom_key");
Http.send();
Http.onreadystatechange = (e) => {
console.log(Http.responseText);
};
}
I got the error我得到了错误
Access to XMLHttpRequest at 'my_workers_url' from origin 'null' 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. Access to XMLHttpRequest at 'my_workers_url' from origin 'null' 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.
I have added on both side the Access-Control-Allow-Origin
at *
but it doesn't work我在*
的两边都添加了Access-Control-Allow-Origin
但它不起作用
What can I do to avoid the error?我该怎么做才能避免错误?
Already read this and this but it doesn't solve the issue已经读过这个和这个,但它不能解决问题
The issue was that the worker didn't answer to OPTIONS request.问题是工人没有回答 OPTIONS 请求。
The solution was to handle these type of requests with解决方案是处理这些类型的请求
if (request.method === "OPTIONS") {
return handleOptions(request)
}
and和
function handleOptions(request) {
if (request.headers.get("Origin") !== null &&
request.headers.get("Access-Control-Request-Method") !== null &&
request.headers.get("Access-Control-Request-Headers") !== null) {
// Handle CORS pre-flight request.
return new Response(null, {
headers: corsHeaders
})
} else {
// Handle standard OPTIONS request.
return new Response(null, {
headers: {
"Allow": "GET, OPTIONS",
}
})
}
}
with和
const corsHeaders = {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "GET, OPTIONS",
"Access-Control-Allow-Headers": "*",
}
Clearly Access-Control-Allow-Origin
and Access-Control-Allow-Headers
adding only the显然Access-Control-Allow-Origin
和Access-Control-Allow-Headers
仅添加
Reference https://community.cloudflare.com/t/handling-preflight-requests/30260/3参考https://community.cloudflare.com/t/handling-preflight-requests/30260/3
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.