1

I am fetching playlistItems from the Youtube Data API via this URL:

URL = `https://youtube.googleapis.com/youtube/v3/playlistItems?part=snippet%2C%20contentDetails&playlistId=${playlistId}&maxResults=${50}&pageToken=${nextPageToken}&key=${API_KEY}`

it works fine in a project I'm using for experimentation.

Now it was time to copy the code into my actual application.

The only thing I changed was that I put the API_Key inside my .env and set it via:

const API_KEY = process.env.YT_API_KEY

I still don't understand why, but the URL ends up having key=undefined at the end: enter image description here

I am setting it inside .env like this: enter image description here

Now to the real reason why I'm seeking help: To fix the issue, I set the API_KEY directly inside the file that makes the fetch.

But I get the same 401 error as above (except key= is not undefined anymore)

And when I click the link in the error message, I can look at the JSON object, that I seek. So the URL is definitely working. As it (still) does in my other project.

So what leads to the 401 error then?

I had the idea, that maybe I need to change something in the cloud platform credentials settings. But my API key doesn't have any restrictions.

J0hannes
  • 593
  • 5
  • 10
  • unauthorized (401) when you created this new api key where did you create it exactly? is it in the same project as before or did you create a new project? – Linda Lawton - DaImTo Oct 12 '21 at 13:47
  • it works in one project. not in another (older) project. both are on localhost: 3000 – J0hannes Oct 12 '21 at 13:53
  • But is it the same API key? Ok heres a fun one double check that your api key isnt getting cut off i have seen env vars get eaten sometimes. Also check that the encoding isnt getting messed up it needs to get http encoded to go to the api. – Linda Lawton - DaImTo Oct 12 '21 at 13:53
  • I want to emphasize, that rightclick>open in new tab> on the link shown in the 401 error shows me the JSON objects that I'm asking for. – J0hannes Oct 12 '21 at 13:54
  • it's the exact same request URL with the same key – J0hannes Oct 12 '21 at 13:55

1 Answers1

0

Problem: The application is setting a global header via axios.

Solution: using fetch() instead

J0hannes
  • 593
  • 5
  • 10