I utilized the facebook live comments API to fetch real-time video comments. I was able to accomplish this successfully in my local environment. However, when I deployed the project with a domain name, I encountered a CORS error. Any suggestions on how to resolve this?
Below is a snippet of the code used:
window.Vue = require('vue').default
var app = new Vue({
el: '#fb_call',
components: {
},
data() {
return {
comments: []
}
},
created() {
this.getLiveComment()
},
mounted() {
},
methods: {
getLiveComment: function() {
let self = this
let videoID = '357160146189320'
var source = new EventSource("https://streaming-graph.facebook.com/"+videoID+"/live_comments?fields=from{name,id},message&comment_rate=one_per_two_seconds&access_token=xxx");
source.onmessage = function(event) {
let keystring = ['lock', 'beli'];
let msg = JSON.parse(event.data).message
if(keystring.map((kt) => msg.includes(kt)).includes(true)) {
self.comments.unshift(JSON.parse(event.data))
}
console.log(JSON.parse(event.data).message)
};
}
}
})
Error from browser
Access to resource at 'https://streaming-graph.facebook.com/357160146189320/live_comments?fields=from{name,id},message&comment_rate=one_per_two_seconds&access_token=xxx' from origin 'https://example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.