https://supertokens.com/ logo
Join Discord
Powered by
I have "staging" and "production". Production is s...
# support-questions
f
I have "staging" and "production". Production is set to "www.example.com" in appInfo(). So, "staging.example.com" is getting this error. I'm assuming this has to do with the "appInfo()" logic: 
Access to fetch at 'https://www.finicky.pet/api/auth/session/refresh' from origin 'https://staging.finicky.pet' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header has a value 'https://www.finicky.pet' that is not equal to the supplied origin. Have the server send the header with a valid value, or, if an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
n
Hi, Your frontend should be configuring appInfo differently for the two environments
f
frontendConfig() or appInfo()?
here's my appInfo()
Copy code
export const appInfo = {
  // learn more about this on https://supertokens.com/docs/emailpassword/appinfo
  appName: "finicky.pet-v4",
  apiDomain: process.env.NEXT_PUBLIC_HOST,
  websiteDomain: process.env.NEXT_PUBLIC_HOST,
  apiBasePath: "/api/auth",
  websiteBasePath: "/auth",
};
n
Right and you use that on the Frontend as well correct?
f
yeah, but NEXT_PUBLIC_HOST is actually set to the right url on staging
n
Can you enable debug logging on both the frontend and backend and post the output here?
f
ok, have to commit to staging, please hold
hmm not getting any readout
n
On your frontend and backend? Or one of them?
f
none of them, let me try firefox
n
What version of the SDKs are you using?
f
np made me install a couple of weeks ago, so I could debug
rp
*made me upgrade
n
Strange, can you log the value of appInfo yourself?
f
my version: `
"supertokens-auth-react": "^0.21.3", "supertokens-node": "^9.2.0",`
n
Yep that should work, try logging appInfo before passing it to SuperTokens yourself and we can debug from there
f
you mean just "console.log(appInfo())" ?
n
Yep
f
or appInfo, no brackets, right
no parens I mean
n
The exact way you are passing it to SuperTokens would work best
f
ok, so when I run on localhost, the debugging works, but staging doesn't debug
I'm checking console.log(appinfo) now
n
Does your staging environment disable console logging in any way?
f
staging is on Vercel, so, I assume it's not allowing
actually, Vercel does allow console. logging but this CORS error seems to intercept everything right now
n
Debug logging for SuperTokens would trigger before you make any network requests so it should work
f
this -> 
Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header has a value 'https://www.finicky.pet' that is not equal to the supplied origin.
n
Anyways lets see if your log goes through
f
no it doesn't
n
Can you check the request headers + response headers in the browser?
f
they look ok
getting a 200
plus, host = staging.finicky.pet
n
So the error is saying that your backend is expecting requests from 
https://www.finicky.pet
and not 
staging.finicky.pet
f
this 'Access-Control-Allow-Origin' point so to production
right
n
Which is why you are getting CORS errors
If I understand correctly you have two environments for your frontend (staging and production)
Does your backend also have two environments?
f
well, how do I answer that? I think yes would be the answer
where is that code for 'Access-Control...'?
n
On the backend when you setup cors (using the steps in our docs) it adds it based on the value of 
websiteDomain
you pass to SuperTokens.init
f
right which is an .ENV variable
and is set in Vercel
n
Yep but from the error it looks like the backend always uses the production url
f
both front and back configs are pulling in "appInfo", so it's the same
n
So debug logs would really help here, can you look into why Vercel isnt showing the logs?
The CORS error wont block any logs so its not that
f
This is my /api/auth code
Copy code
export default async function superTokens(req, res) {
  // NOTE: We need CORS only if we are querying the APIs from a different origin
  await NextCors(req, res, {
    methods: ["GET", "HEAD", "PUT", "PATCH", "POST", "DELETE"],
    origin: process.env.NEXT_PUBLIC_HOST,
    credentials: true,
    allowedHeaders: ["content-type", ...supertokens.getAllCORSHeaders()],
  });

  await superTokensNextWrapper(
    async (next) => {
      await middleware()(req, res, next);
    },
    req,
    res
  );
  if (!res.writableEnded) {
    res.status(404).send("Not found");
  }
}
this at top -> 
supertokens.init(backendConfig());
I see this in firefox now
Copy code
Status
500
Internal Server Error
VersionHTTP/2
Transferred424 B (0 B size)
Referrer Policystrict-origin-when-cross-origin
r
which API are you querying which is giving a 500 error?
Can you add a try/ catch around this:
Copy code
await superTokensNextWrapper(
    async (next) => {
      await middleware()(req, res, next);
    },
    req,
    res
  );
And log the error?
f
ok
this is the api error
r
you need to send a POST request to it
if i send a POST request using postman, it returns a 401 - unauthorised error
f
yes, I have staging and production "whitelisted" now, so you will get that, I'm sure that's it
only my ip can access
r
right.
so it does return 401 as expected (for me)
f
yes
r
what origin are you querying it from?
And what is the value of 
process.env.NEXT_PUBLIC_HOST
?
f
locally it's my localhost; staging is => staging.finicky.pet
production is www.finicky.pet
r
and you are querying the API from which domain?
f
well, works fine on production, and localhost(development), staging is the only issue. I assume, according to all the logic, I'm querying staging API
make sense?
I'm getting no console.log on staging cause that CORS error just takes over, however the page loads though
r
you should be querying the staging API, and if you have set 
NEXT_PUBLIC_HOST
correctly, it should work
f
yes
it is, page loads, but I get the CORS error
r
what is the response headers from the CORS API?
f
Request URL: https://www.finicky.pet/api/auth/session/refresh Referrer Policy: strict-origin-when-cross-origin
clearly, it wants production
r
well, are you setting the apiDomain correctly on the frontend?
f
yes, we went through this a week ago, or so?
r
which API should it query?
f
appName: "finicky.pet-v4", apiDomain: process.env.NEXT_PUBLIC_HOST, websiteDomain: process.env.NEXT_PUBLIC_HOST, apiBasePath: "/api/auth", websiteBasePath: "/auth",
r
the prod one or the staging one?
f
i'm trying access staging, but it sends and error that it's being refused by www.finicky.pet
right?
r
if you want it to query https://staging.finicky.pet/api/auth/*, you need to set he apiDomai to https://staging.finicky.pet
f
it is on Vercel
the .env are diff for dev, staging, and production
they are set properly I've checked and rechecked
r
Can you add a console log in the frontend config to print out the value of 
process.env.NEXT_PUBLIC_HOST
? You should see that console log on the browser console
f
in my next.config, I have 
reactStrictMode: true
is that a problem?
r
shouldn't be
also, here is ablog we have to deploying on vercel. Might help: https://supertokens.com/blog/how-to-deploy-supertokens-with-react-nodejs-express-on-vercel
f
OK, i'm using nextjs though
r
well, please make sure that the value of 
NEXT_PUBLIC_HOST
is correct - print it out on the browser console to make sure
f
man, I can't get any console.log to show! the CORS error just, I don't know, prevents it
doesn't make sense
r
it shows just a coming soon page
can you make it so that I can get the error too on my machine?
f
whitelisted
ok, what's your ip?
r
DM'd you
2 Views
PreviousNext
Powered by