Getting CORS error when using facebook graph API

Question

I used facebook live comments API to retrieve live video comments. I able to do it successfully when in local environment. But when I deploy the project with domain name, I get the cors error. Any ideas on how do solve this?

Here is the sample code.

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.

Answer 1

Make sure the access token hasn't expired. That happened to me and the FB access token was expired. You can check if the token has expired or not by debugging here https://developers.facebook.com/tools/debug/accesstoken/

Answer 2

I got same error. when using https://streaming-graph.facebook.com/"+videoID+"/live_comments. It happens when live video is not streaming. It returns value when your live video is streaming.