Access to fetch at 'https://...' has been blocked by CORS policy

Developing with Prismic
1

The following prismic.js configuration:

import * as prismic from "@prismicio/client";

export const repositoryName = '{repoName}'
const endpoint = prismic.getEndpoint(repositoryName);
export const client = prismic.createClient(endpoint, { fetch });

Works with the following request:

const [promotionsList] = useSinglePrismicDocument('promotions_list_page')

But when I change the prismic.js to have routing:

export const repositoryName = '{repoName}'
const endpoint = prismic.getEndpoint(repositoryName);
export const client = prismic.createClient(endpoint, {

  accessToken: "",

  routes: [
    {
      type: "page",
      path: "/:uid",
    },
    {
      type: "promotions_list_page",
      path: "/promotions",
    },
  ],
});

I get the following error:

Access to fetch at 'https://{repository}.cdn.prismic.io/api/v2/documents/search?q=%5B%5Bat%28document.type%2C+%22promotions_list_page%22%29%5D%5D&ref={master_ref}&routes=%5B%7B%22type%22%3A%22page%22%2C%22path%22%3A%22%2F%3Auid%22%7D%5D&access_token=' 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.

I think the issue has to do with the way I am declaring the route. Any help would be appreciated!

3

Hello Michael,

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

I don't find any issue with how you define the routes. It seems correct to me. The issue is coming from something else. Please share your Prismic repository name and project source code (Github or Zip file).

You can send me these by Private message.

Thanks,
Priyanka

5

Hello @mendres

I have checked your project, and there are multiple issues I found:

  • First, you have given type: "page", path: "/:uid", in your routes. There is no page Custom Type in your repository. Routes define how you will structure URL paths in your project. You need to update the types to match the Custom Types in your project and edit the paths to match the routing in your project. Learn more about Route Resolver..

  • Second, in App.js Routes path in the Routes component should match route resolver defining in routes.

  • Third, In the menu.jsx file, you are creating static links, not dynamic links. But you can create a dynamic link s with Prismic and code accordingly. Learn about how to model a menu Custom Type in Prismic.

I would suggest you check our multi-page example project to start your project.

Let me know if you have any further questions.

Thanks,
Priyanka

6

Thank you Priyanka, that was helpful!

Do you have a sample project that uses a route resolver? I have read the documentation
(Link Resolver and Route Resolver - Prismic), but without being able to see how the types are configured in the repo, it is difficult for me understand.

I am trying to create a nav menu that has categories and each category has sub-categories.
Example:
Promotions // ('/promotions')

  • All // ('promotions/all')
  • Sports // ('promotions/sports')
  • Casino // ('promotions/casino')

Edit: I have a data structure (Creating a 3+ level Navigation Menu) that appears to work, but I can't figure out the URL/path logic above.

7

Thanks, I got it working!

8

@mendres Great. Let us know if you have any questions.

10

Priyanka,
In my navigation_menu custom type, the URL property in my first_level link is '/uid' rather than /${uid}
I'm likely doing something wrong, but I can't seem to find where to fix this. Please see below:

image

image
image395×1009 13.7 KB

12

Hello @mendres

I need more details like:

  1. What do you want to achieve?
  2. How you have defined the Root resolver in your project?

Thanks,
Priyanka

13

I found the problem. Thank you.

14

@mendres, I am glad that it worked for you. Let us know if you have any other questions. Thanks.

19

Hi Priyanka,

I have a similar problem - CORS issue.

const client = createClient()
let docs = await client.getAllByType("family_trek")
console.log(docs)

The above code works but when i replace "family_trek" with "trek" which i have as a custom type in my prismic repo, it gives me the CORS error. I have been trying to debug this issue since 2 weeks now. i am also in touch with Pauline from your team but i havent found any resolution yet

Can you please look into it?

20

Hello @ebrahimbookwala, I've responded to your initial conversation in the portal. I can't seem to reproduce the error. The site runs ok on my end.