I am getting CORS error while getting video analytics
Here is my code;
const fetchVideoAnalytics = async (publicId) => { try { const response = await fetch( `https://api.cloudinary.com/v1_1/${cloudName}/video/analytics/views?expression=video_public_id=${publicId}`, { method: "GET", headers: { mode: "no-cors", Authorization: `Basic ${basicAuth}`, }, } ); const analyticsData = await response.json(); const { views, plays, unique_viewers, total_watch_time } = analyticsData;
setAnalyticsInfo({ views, plays, uniqueViewers: unique_viewers, watchTime: total_watch_time, });
// Simulating the chart data for now setChartData({ labels: ["Day 1", "Day 2", "Day 3"], datasets: [ { label: "Views", data: [50, 80, 100], borderColor: "rgba(75,192,192,1)", backgroundColor: "rgba(75,192,192,0.4)", }, ], }); } catch (error) { console.error("Error fetching video analytics:", error); } };
Answers
-
Hi @rao_rabi ,
Thanks for reaching out.
Video analytics API uses basic authentication so we do not support making request to it via client-side as this will expose your API credentials which is why you get the CORS error.
You should make the request to this API via a backend server and then relay the response back to the client.
Please let me know if you have any other questions or queries.
Kind Regards,
Thomas
0