Site Name : https://aesthetic-pixie-372204.netlify.app/
An API I am using is returning an error Token is missing.
I thought this was a .env issue, but it is working locally.
The site is built with NextJS, and have this API being called in the api folder.
here is a screenshot of the headers…
Any ideas why this isn’t working ? I heard maybe it is because netlify doesn’t support calling APIs like this ? Or is ti something more specific to my API / .env files not getting the token ?
Would appreciate any help, thanks !
Having it work locally doesn’t necessarily preclude it from being an environment variable issue, have you confirmed that the environment variable is set/available to the appropriate script on Netlify?
Edit: Since you were using an environment variable I had presumed you were talking about a Serverless Function, where the variable would be kept private, but it looks like the variable is part of your client-side code and thus is actually public.
If so, I can see it on the request ending in LVUETc
Ahh okay a few things…
-
About my API being public - I just pushed an update which should be live by the time you read this. I had been testing the API key without .env variables. Sorry about that. I just changed it back to using process.env.KEY.
-
I have the .env variables set in the Netlify Environmental Variables section. I am not sure how to tell if they are working, though.
-
For reference, the API I am using can be foundd here here : Authentication
-
I am making all these API calls here within the API folder
I am not sure what the cause is. I have the same issue using another hosting platform too.
@Netlified I still see the key in your client side code…
Which isn’t a problem if it’s supposed to be a public key and can be called from a client-side situation.
Using Environment variables doesn’t magically prevent the value from being compiled into the code, if you reference it, it’ll end up in there.
You should be able to leverage rewrites to proxy the API and avoid the CORS issue, or alternatively use a Serverless Function so that your key is kept private (if it actually needs to be - which it may not - I’ve not read the docs).
Here’s someone else’s writeup about it…
I am a little confused. The response I am getting is, “Token is missing” - I am assuming that is referring to the API key is missing from the request. I am not seeing any CORS issue on my end. Do you think this Token is missing error is due to CORS ?
Edit: I do actually now see the CORS error and no more token issue when moving from bearer to query. I can try to add a cors anywhere proxy as a quick fix – then explore the article you sent, because it looks very helpful.
Thanks so much, will keep posted.
