CORS Policy keeps blocking me

Developing with Prismic
1

Hi all,
Greetings! I'm trying to fetch blog posts from Prismic but I'm getting an error

I have a custom type of blog_card and I have one document linked to the blog_card type, with a UID of blog1. But when I fetch, I get an error.

export default function Page() {
  const client = createClient()
  const [blogData, setBlogData] = useState(null)

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await client.getByUID('blog_card', 'blog1')
        setBlogData(response)
      } catch (error) {
        console.error('Error fetching data:', error)
      }
    }

    fetchData()
  }, [client])

  console.log(blogData)
}

You can see I'm trying to fetch the blog card content using getByUID but it keeps failing.

Error:

Acess to fetch at 'https://.cdn.prismic.io/api/v2/documents/search?q=q** from origin 'http://localhost:3000' 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.

5

Hey @chadereiroro134,

Welcome to the Prismic community, and thanks for reaching out to us!

I appreciate your patience with my delayed response.

CORS issues are often very tricky to debug, and I could not reproduce the error. Is this the only query failing, or are other queries also failing?

And can you also tell me what version of prismicio/client you are running on your project?

Thanks,
Racheal.