Getting error : blocked by CORS policy: No 'Access-Control-Allow-Origin'

So, I am creating a website which uses Fauna to save authentication and arrays of URLs.
The login section with nextAuth and Fauna works just fine, but when I try to get the user data from Fauna DB, i get this error.

“Access to fetch at ‘https://db.fauna.com/’ from origin ‘https://art-match-s16i.vercel.app’ has been blocked by CORS policy: 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.”

if i were to get the cors error sholdnt be on both functions, q.Get and q.Create?

this is the getRef code:

import faunadb from 'faunadb'
import {fauna} from "../../../services/fauna"

export async function saveImageOnGallery( userEmail:string ){
  const q = faunadb.query
  try{
    const userRef = 
    await fauna.query(
      q.Select(
        "ref",
        q.Get(
            q.Match(
                q.Index('user_by_email'),
                userEmail
            )
          )
        )
      )
    }catch(error){
      console.log(error)
    }
}

and this is the new client section:

import { Client } from 'faunadb'

export const fauna = new Client({
    secret: process.env.FAUNA_KEY,
    domain: 'db.fauna.com',
    scheme: 'https',
})

The sign-in/create user in collection part where i dont get any Cors problem:

import NextAuth from "next-auth"
import FacebookProvider from "next-auth/providers/facebook";
import GoogleProvider from "next-auth/providers/google";
import { fauna } from "../../../services/fauna";

import {query as q} from 'faunadb'

export const authOptions = {
  // Configure one or more authentication providers
  domain:'db.fauna.com',
  providers: [
    FacebookProvider({
      clientId: process.env.FACEBOOK_CLIENT_ID,
      clientSecret: process.env.FACEBOOK_CLIENT_SECRET
    }),
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
      
      authorization: {
        params: {
          prompt: "consent",
          access_type: "offline",
          response_type: "code"
        }
      }
    }),
    
    // ...add more providers here
  ],
  // jwt: {
  //   maxAge: 60 * 60 * 24 * 30,
  //   signingKey: process.env.NEXT_AUTH_JWT_KEY,
  //   verificationOptions: {
  //     algorithms: ["HS256"]
  //   }
  // },
  callbacks: {
    async signIn({ user, account, profile}) {
      const {email} = user
      try{
        await fauna.query(
          q.If(
            q.Not(
                q.Exists(
                    q.Match(
                        q.Index('user_by_email'),
                        q.Casefold(user.email)
                    )
                )
            ),
            q.Create(
                q.Collection('users'),
                { data: {email}}
            ),
            q.Get(
                q.Match(
                    q.Index('user_by_email'),
                    q.Casefold(user.email)
                )
            )
        ))
        
      return true

      }catch(e){
        console.log(e)
        return false
      }
    }
  },
}
export default NextAuth(authOptions)

been trying to resolve it for a while, I really need help.

Hi @Mazakina and welcome!

The difference between the two queries could be that saveImageOnGallery is called client-side from the browser, but that doesn’t explain the CORS issue.

Can you provide more information about your environment?

  • can you confirm saveImageOnGallery is run client-side?
  • what browser are you using?
  • can you share a screenshot of the error?
  • Is the issue new or intermittent?

notes:

Fauna enables CORS on API requests, because it is designed to be called from anywhere. The query body does not affect CORS.

I deployed a minimal app to Vercel to test a client fetch and it is working for me. Is it still giving you problems? I want to rule out a possible temporary issue. You can see the request to Fauna, including the response headers, in the network tab.

I also ran a preflight CORS check directly using postman for your domain and don’t see any red flags there.

1 Like

It is client side, i’ve tested on server side and it seens to only happens on client.
I am using Google Chrome, but it also happens to give me the same error on Edge.


it is new, as I only used fauna on server side until now.

Just solved it, thank you, after I thought about not being able to post through client side, I just remembered that server side doesnt send origin, so decided to sent a req to server side to post on fauna, works just fine now.

I am just starting with programing so your comment really helped, thanks so much!