React App preflight CORS error, cannot GET - resolved

I’ve seen the other posts on this board regarding this issue, but I’m not sure their answers were very applicable to me so I’m starting a new post.

I’m making a small client-side-only React app. I’m using implicit auth flow to get a token which I’m able to do successfully.

My subsequest API call fails with the following error:

Here’s my code:

const buttonClick = async () => {
    const token = window.location.href.split('=')[1].split('&')[0]
    // console.log(token)

    try {
      const req = await fetch('https://twitch.tv/helix/search/categories?query=magic', {
        method: 'GET',
        headers: {
          "Authorization": `Bearer ${token}`,
          "client-id": process.env.REACT_APP_CLIENT_ID,
        }
      })

      const resp = await req.json()
      console.log(resp)
      
    } catch (error) {
      console.log(error)
    }
  }

I thought a request could be made to the API from the browser when using this implicit auth flow? Am I missing something else?

Thanks in advance.

*edit: I’ll add that this app was scaffolded using npx create-react-app

I encountered so many issues by doing the requests in the frontend, I suggest you if you can to create a small backend with NodeJS for example, it helped me a lot

This was my thought. I wanted to avoid it, but I guess this way I would be able to use an App token which would fit my use case better anyway. Ty.

You’re getting an error because the URL you are fetching is wrong.

https://twitch.tv/helix/search/categories?query=magic should be https://api.twitch.tv/helix/search/categories?query=magic

1 Like

OMG thank you. I knew it was something small. I looked at that URL like 3x and still missed it! I appreciate the extra eyes. *How do I close this? - nvm

Also looks like you probably should be using “Get Streams” not search https://dev.twitch.tv/docs/api/reference#get-streams

Thanks BarryCarlyon. First I wanted to search for the Game ID first, now I am able to get the info I want from the /streams endpoint.

ha sorry my bad, I was skim reading and saw search and was “someone called search instead of streams again”

If you have the “exact” game name then https://dev.twitch.tv/docs/api/reference#get-games works, otherwise yes, you need a Category Search instead.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.