Cross Domain JS Include

Website Building
#1

Hey folks, I wonder if anyone can help me with a cross domain issue I’m having. I’m trying to integrate a Twitch video with JS but I can’t access the API as I get the following error:

Access to fetch at ‘https://api.twitch.tv/api/viewer/token.json’ from origin ‘https:// embed dot twitch dot tv’ (changed domain due to one link in post limit) has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: The value of the ‘Access-Control-Allow-Origin’ header in the response must not be the wildcard ‘*’ when the request’s credentials mode is ‘include’.

What can I do to resolve this please?

#2

Hey there,
What is the site in question? And what tutorial did you follow?

#3

On what page do you get this error message & does the stream load at all?
Have you used a client ID in your code available from Twitch API?

1 Like
#4

Thanks for the replies, sorry I should have included the link originally:

https://twitch-lurk-pal.000webhostapp.com/

Whilst I do have a client ID I don’t believe that I have to use it in this situation since I’m not directly interacting with the API.

I have directly copied the example here:

Thanks

#5

Hi sorry for my delay in responding, I viewed the webpage briefly and the stream was working when I viewed, is the error causing any issues or did you resolve it?

#6

Hey Infinity, the stream works fine but the player object comes back as empty and I am unable to interact with it through the script. I’m assuming that this is caused by the errors displayed in the console and is something to do with the cross domain request of the script?

For example I can’t even get the channel name from the player object, and if you check the updated code and the console output you will see it is empty. Using the debugger I can see that the player object although being defined has all empty data:

  1. player: e

  2. _everywhereWindow: global {window: global, self: global, location: Location, closed: false, frames: global, …}

  3. _playerState:

  4. channelId: “”

  5. channelName: “”

  6. currentTime: 0

  7. duration: 0

  8. muted: false

  9. playback: “”

  10. qualitiesAvailable: []

  11. quality: “”

  12. stats: {}

  13. videoID: “”

  14. viewers: 0

  15. volume: 0

#7

OK I’ve managed to get to the bottom of this. It appears that although the video starts playing there is a delay in the API being ready to provide data, therefore this can be overcome by putting a delay in or setting a timeout to repeat until data is retrieved. Thanks for your help

1 Like