Error CORS with primsic & react

Developing with Prismic
1

Hello I have a common issue with CORS, this is my error in the console :

Access to fetch at 'https://livre-blanc.cdn.prismic.io/api/v2/documents/search?q=[[at(document.type%2C+"blog")]]&pageSize=1&ref=ZMWitxAAACMANOL5&routes=[{"type"%3A"page"%2C"path"%3A"%2F%3Auid"}]' from origin 'http://localhost:5173' 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.

How could I disable this to have the full access of my data ?

This is my code :slightly_smiling_face:

import * as prismic from '@prismicio/client'

export const repositoryUrl = 'myUrlRepo'

export const client = prismic.createClient(repositoryUrl, {

    routes: [
        {
            type: 'page',
            path: '/:uid',
        },
    ],
})

The component i try to display :

import {Button} from "../atoms/Button.jsx";
import {useSinglePrismicDocument} from "@prismicio/react";

export  const Blog = () => {
     const blog = useSinglePrismicDocument("blog");
     console.log(blog)
    return (
        <>
            <Button />
        </>
    )
}

If you have a solution it would be great !

3

Hello @quentinserda,

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

With the code you shared, the type in the routes is page, but in your component where you're fetching data custom type is blog. You need to update the routes to match the custom types in your repository. So in your case, the route would look like this:

routes: [
   {
      type: 'blog',
      path: '/:uid',
   },
 ],

Try it out and let me know :slight_smile:

Thanks,
Racheal.