Twitch - NONE out of 3 proposed queries work. Suggestions?

1

I am ready to finish up my twitch tv project. HOWEVER, while this GET query works very well for all twitch-tv users in my Safari browser:

https://wind-bow.gomix.me/twitch-api/channels/freecodecamp

Unfortunately, in code pen, this does not work, and neither do

https://api.twitch.tv/kraken/channels/freecodecamp
https://wind-bow.hyperdev.space/twitch-api/channels/freecodecamp

None of the 3 works for ANY of the users listed. These three seem to be the only possibilities, based on the documentation that I have seen. So I am stuck.

Perhaps someone could give me a query that will work in code pen.

Or, I could leave a safari version in code pen, and the reviewer could copy-and-paste the html (that’s all there will be) into a “normal” browser. Or I could put it in github.

Would that be OK?

Thanks

2

Do you provide client id when using this one?

3

have you switched your codepen url to https?

4

I don’t need a client ID when using the working query in Safari - it works fine without one. Will it be different in code pen?

5

What do you mean by switching the code pen url to https? My queries to twitch use https already.

6

but if your url is http, you will get a cross origin issue.

Have a look in the errors in your dev console (F12 on most borwsers) and if that is the case the error will be there.

https://mycodepenlink.io

just stick https:// in front of the address in your browser

7

Here is the url I use to access code pen:

In my queries, I already use https.

Here is the error message - it does not seem to be a cross-origin problem.

[Error] XMLHttpRequest cannot load https://wind-bow.gomix.me/twitch-api/channels/freecodecamp. Origin http://s.codepen.io is not allowed by Access-Control-Allow-Origin.

It looks like the “origin” message is bad - the “s” is on the wrong side of the //. Is there a way to include origin in the twitch query?

8

I think the s is appended (the one on the wrong side) is appended when you go to debug view.

the error is saying you have a cross origin issue (http to https request). you mustn’t be using https correctly.

it should look something like this.

https://codepen.io/mpjones/pen/BzPGZk (this pen won’t actually work with https as it cause the same cross origin issue - but the address format is what i’m getting at)

Could you post the link to your pen so I can check it? (and if it is indeed that issue)

9

(This link works when I paste it into a browser.)
So far in this application I only write to the console - I am trying to understand the format and content of the returned messages. So you won’t see anything unless you show the error console.

Thank you very much for looking into this. I appreciate it.

10

Hey @sabrawer,

I just spent an hour going around in circles like you have… it should work but it didn’t. So i changed the url back to the kraken one and its working in my version. It works for both http and https codepen urls.

Spoiler link

https://codepen.io/mpjones/pen/ObwPKQ?editors=0011

11

Thank you for spending the time.

The kracken does NOT work for me. Also, I ran the one in your link, and it does NOT work for me.

So, something is weird here.

I think I will put a note on the web page, at the beginning of my code pen twitch project, to the reviewer, indicating that the reviewer should paste the application into a “normal” browser and run it, and review from that. I will reference this discussion.

12

did you put your id in?

13

var id = ‘?&client_id=yourIdNumberHere’

the number string in place of yourIdNumberHere?