[solved] CORS Error on local development with NextJS and Supabase

heyho, I've a question regarding supabase local development CORS policy.

My nextjs App is on localhost:3000 and supabase local docker container on localhost:5432X.

Everytime I make a request for data, or try to use the signup functions i get a CORS related error:

Access to fetch at 'http://localhost:54324/auth/v1/token?grant_type=password' from origin 'https://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Access to fetch at 'http://localhost:54324/auth/v1/token?grant_type=password' from origin 'https://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Access to fetch at 'http://localhost:54324/auth/v1/token?grant_type=password' from origin 'https://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Access to fetch at 'http://localhost:54324/auth/v1/token?grant_type=password' from origin 'https://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

And I really can't get my head around that, I don't find any documentation or help to get my request get trough on local development.

If I use the DB directly from a supabase URL, f.ex.:

https://xxx.supabase.co

https://xxx.supabase.co

https://xxx.supabase.co

https://xxx.supabase.co it works just fine. But i really want to operate directly on a local environment and not use the web application for my app at the moment.

The request I make for example, to login is like that:

supabase.auth.signInWithPassword({
  email: 'email@xyz.dev', 
  password: 'xyz1234',
})

supabase.auth.signInWithPassword({
  email: 'email@xyz.dev', 
  password: 'xyz1234',
})

supabase.auth.signInWithPassword({
  email: 'email@xyz.dev', 
  password: 'xyz1234',
})

supabase.auth.signInWithPassword({
  email: 'email@xyz.dev', 
  password: 'xyz1234',
})

Can somebody tell me what I do wrong here?

kobyOP•3/22/23, 10:32 AM

Nevermind, i got it to work by myself!

Sometimes it just helps to write down all your problems, have a break and come back with another view.

silentworks•3/22/23, 4:09 PM

What was the issue? Adding your answer will help someone else in the future who might make the same mistake that lead to the issue.

hensou•3/29/23, 5:56 PM

@koby , if you could provide your solution that would really be helpful, just now I started to have the same issue on a production system when trying to access the Storage API

kobyOP•3/29/23, 9:41 PM

@hensou I think my solution will not help you at all, sadly!

I had just configured the wrong port on local development, that’s why the CORS error occurred. Was more a typo than a real error tho..

@silentworks you are absolutly right, didn’t think about that.

hensou•3/30/23, 8:38 AM

I see, thanks anyway @koby .
For me it's happening only at the production environment, and only for images, but Pdfs or any other file upload still works.

For I moment I thought it could be something with imgproxyimgproxy, but I'm not even doing any transformations.

draco•12/20/23, 11:56 AM

I am having this issue now and everything seems to be configured properly but I am still getting CORS issues. Any ideas on where to go next? I have been trying to fix it for a couple hours now. Its strange because it was working for a while and then it suddenly stopped. no changes made no local server restart it just started hitting CORS issues on a page refresh

[solved] CORS Error on local development with NextJS and Supabase

Similar Threads

Similar Threads

Similar Threads