我是 Cloudflare Workers 的新手。
如何在 Cloudflare Workers 中设置 CORS?
response = await cache.match(cacheKey);
if (!response) {
// handle fetch data and cache
}
const myHeaders = new Headers();
myHeaders.set("Access-Control-Allow-Origin", event.request.headers.get("Origin"));
return new Response(JSON.stringify({
response
}), {
status: 200, headers: myHeaders
});
其实很痛苦。 Cloudflare 中有一个示例,但不能直接使用。最近终于搞定了,把详细步骤写成一个 博客文章。
这是工作人员的完整代码。
// Reference: https://developers.cloudflare.com/workers/examples/cors-header-proxy
const corsHeaders = {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "GET,HEAD,POST,OPTIONS",
"Access-Control-Max-Age": "86400",
}
function handleOptions (request) {
// Make sure the necessary headers are present
// for this to be a valid pre-flight request
let headers = request.headers
if (
headers.get("Origin") !== null &&
headers.get("Access-Control-Request-Method") !== null &&
headers.get("Access-Control-Request-Headers") !== null
) {
// Handle CORS pre-flight request.
// If you want to check or reject the requested method + headers
// you can do that here.
let respHeaders = {
...corsHeaders,
// Allow all future content Request headers to go back to browser
// such as Authorization (Bearer) or X-Client-Name-Version
"Access-Control-Allow-Headers": request.headers.get("Access-Control-Request-Headers"),
}
return new Response(null, {
headers: respHeaders,
})
}
else {
// Handle standard OPTIONS request.
// If you want to allow other HTTP Methods, you can do that here.
return new Response(null, {
headers: {
Allow: "GET, HEAD, POST, OPTIONS",
},
})
}
}
async function handleRequest (request) {
let response
if (request.method === "OPTIONS") {
response = handleOptions(request)
}
else {
response = await fetch(request)
response = new Response(response.body, response)
response.headers.set("Access-Control-Allow-Origin", "*")
response.headers.set("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS")
}
return response
}
addEventListener("fetch", (event) => {
event.respondWith(
handleRequest(event.request).catch(
(err) => new Response(err.stack, { status: 500 })
)
);
});
这是“cloudflare 工作线程错误”的 Google 搜索结果。
这是设置正确标题的超级简单方法。
您可以像这样调用 Cloudflare 函数:
async function callCloudflareWorker(parameter) {
const workerUrl = `https://name.account.workers.dev/`; // Replace with your actual worker URL
const response = await fetch(workerUrl, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ parameter }),
});
if (!response.ok) {
throw new Error(`Error calling Cloudflare Worker: ${response.statusText}`);
}
const data = await response.json();
return data;
}
这会向服务器发送请求。因为它来自浏览器,所以服务器需要发送一个竖起大拇指表示,是的,这是允许的。
您的 Cloudflare 工作人员将如下所示:
addEventListener('fetch', (event) => {
event.respondWith(handleRequest(event.request));
});
const corsHeaders = {
'Access-Control-Allow-Headers': '*', // What headers are allowed. * is wildcard. Instead of using '*', you can specify a list of specific headers that are allowed, such as: Access-Control-Allow-Headers: X-Requested-With, Content-Type, Accept, Authorization.
'Access-Control-Allow-Methods': 'POST', // Allowed methods. Others could be GET, PUT, DELETE etc.
'Access-Control-Allow-Origin': '*', // This is URLs that are allowed to access the server. * is the wildcard character meaning any URL can.
}
async function handleRequest(request) {
if (request.method === "OPTIONS") {
return new Response("OK", {
headers: corsHeaders
});
} else if (request.method === 'POST') {
return doTheWork(request);
} else if (request.method === 'GET') {
return doTheWork(request);
} else {
return new Response("Method not allowed", {
status: 405,
headers: corsHeaders
});
}
}
async function doTheWork(request) {
// Parse the request body to get the parameters
const requestBody = await request.json();
let parameter = requestBody.parameter;
//do the work here
let results = //What your worker does
return new Response(JSON.stringify(results), {
headers: {
'Content-type': 'application/json',
...corsHeaders //uses the spread operator to include the CORS headers.
}
});
}
请注意如何在响应中包含标头。就像浏览器和服务器正在握手一样,是的,这种交互是可以的。
当然,使用 * 字符有问题,请进行一些研究,以确保您在设置和使用 cookie 等时知道自己在做什么。
但这应该有助于新手能够从前端使用 Cloudflare 工作人员。
您的代码未设置 Content-Type 标头。您应该使用 myHeaders.set() 设置它或使用原始响应标头而不是创建空标头对象:
response = await cache.match(cacheKey);
if (!response) {
// handle fetch data and cache
}
const myHeaders = new Headers(response.headers);
myHeaders.set("Access-Control-Allow-Origin", event.request.headers.get("Origin"));
我还质疑为什么您尝试在响应上使用 JSON.stringify 。我想你想要的是这样的:
return new Response(response.body, {status: 200, headers: myHeaders});
这就是它的工作原理。我正在使用 Itty Router 但这对于普通工人来说应该也是一样的。
router.get("/data", async (request) => {
const corsHeaders = {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "GET, OPTIONS",
"Access-Control-Allow-Headers": "*",
};
if (request.method.toLowerCase() === "options") {
return new Response("ok", {
headers: corsHeaders,
});
}
try {
const data = await getData();
return new Response(data, {
headers: {
"Content-Type": "application/json",
// don't forget this.👇🏻 You also need to send back the headers with the actual response
...corsHeaders,
},
});
} catch (error) {}
return new Response(JSON.stringify([]), {
headers: corsHeaders,
});
});
感谢这个免费的 Egghead 视频 将 CORS 标头添加到 Workers API 中的第三方 API 响应中
Anurag 的回答让我完成了 90% 的工作,谢谢你。我也在使用
itty-router
,这是我必须添加的内容。
我创建了一个简单的预检中间件:
const corsHeaders = {
'Access-Control-Allow-Headers': '*',
'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
'Access-Control-Allow-Origin': '*',
};
export const withCorsPreflight = (request: Request) => {
if (request.method.toLowerCase() === 'options') {
return new Response('ok', {
headers: corsHeaders,
});
}
};
然后我将其添加到每条路线中。
router.all('*', withCorsPreflight);
router.get('/api/another-route', handler);
希望这有帮助!
添加这个,
const corsHeaders = {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, HEAD, OPTIONS',
'Access-Control-Max-Age': '86400',
'Access-Control-Allow-Headers' : 'x-worker-key,Content-Type,x-custom-metadata,Content-MD5,x-amz-meta-fileid,x-amz-meta-account_id,x-amz-meta-clientid,x-amz-meta-file_id,x-amz-meta-opportunity_id,x-amz-meta-client_id,x-amz-meta-webhook',
'Access-Control-Allow-Credentials' : 'true',
'Allow': 'GET, POST, PUT, DELETE, HEAD, OPTIONS'
};
export function addCORSHeaders(response: Response){
const newResponse = new Response(response.body, {
status: response.status,
statusText: response.statusText,
headers: corsHeaders,
});
return newResponse;
};
这样消费
export function consumer(env: Env,request: Request,response: Response){
//TODO: Code Here
return addCORSHeaders(new Response(response.body)) ;
}