Show visitor count on my cloudflare page
Hello,
I have a cloudflare worker https://live.lofi.radio/ which shows: 20
I want with HTML/Javascript show this number on https:lofi.radio
But I get this error:
Access to fetch at 'https://live.lofi.radio/' from origin 'https://lofi.radio' has been blocked by CORS policy: 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.
Is there a way you can show output from a cloudflare worker on a cloudflare page?
I do not want to use iframe, also javascript fetch seems not to work.
I do not want to use iframe, also javascript fetch seems not to work.
9 Replies
Thanks for your reply I added this to my cloudflare worker:
// 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",
}But seems not to work, I also found this: https://developers.cloudflare.com/workers/examples/return-json/
Maybe I can use https://live.lofi.radio/worker.js ?
Return JSON · Cloudflare Workers docs
Documentation for Cloudflare Workers, a serverless execution environment that allows you to create entirely new applications or augment existing ones …
Your worker needs to return those headers
just like in that return json example, but just with the other headers you need as well, not sure what you mean about with "workers.js" path, path isn't involved
What is your current return response code in your worker?
Something like this?
you're talking about how you added them to the request in the quick edit dev panel? nah that won't work.
Can you share the code you have currently? If not the full code, at least the part where you return the response
It shows the 57, i want to show this 57 on my cloudflare page (index.html)
My code in worker.js:
addEventListener("fetch", (event) => {
event.respondWith(
handleRequest(event.request).catch(
(err) => new Response(err.stack, { status: 500 })
)
);
});
addEventListener('fetch', event => {
event.respondWith(handleRequest(event.request));
});
async function handleRequest(request) {
const today = new Date().toISOString().split('T')[0];
const query =
query {
viewer {
zones(filter: { zoneTag: "XXX" }) {
httpRequests1dGroups(filter: { date: "${today}" }, limit: 1) {
uniq {
uniques
}
}
}
}
}
;
const data = JSON.stringify({ query });
const response = await fetch('https://api.cloudflare.com/client/v4/graphql', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer XXXXXXX'
},
body: data
});
if (!response.ok) {
throw new Error('Error occurred while fetching data');
}
const result = await response.json();
const uniques = result.data.viewer.zones[0].httpRequests1dGroups[0].uniq.uniques || 0;
return new Response(${uniques}, {
headers: { 'Content-Type': 'text/plain' },
});
}change the last part
Thanks it works!!!! you have a donation page somewhere 🙂 ?