Request header field prismic-ref is not allowed by Access-Control-Allow-Headers in preflight response

Developing with Prismic
1

Hi guys, I have a CORS problem, can you help me?

The question is: Access to fetch at 'https://repository_url...' from origin 'https://my_domain..' has been blocked by CORS policy: Request header field prismic-ref is not allowed by Access-Control-Allow-Headers in preflight response.

Thanks.

2

Use GET instead of POST.

3

Thanks, I use GET indeed, but it doesn’t work

4

That’s weird, because CORS shouldn’t be triggered for GET requests. Could you add a screenshot of the network request?

5

@marcellothearcane The reason CORS is triggered is because of the required prismic-ref header for GraphQL requests:

https://__SOMETHING__.prismic.io/graphql?query=query contactQuestion($tag: String!) { allSlides(tags: [$tag]) { edges { node { linkurl image title textblock _meta { id __typename } __typename } __typename } __typename } } &operationName=contactQuestion&variables={"top":5,"tag":""}

response:

x-ratelimit-limit: 200
x-ratelimit-remaining: 197
access-control-allow-origin: SOMETHING
access-control-allow-headers: Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token,X-Amz-User-Agent
access-control-allow-methods: OPTIONS,GET
X-Firefox-Spdy: h2

What are we missing here?

1 Like
10

Hi Everyone,

Is there anyway you can send me the full link to the request that you're making? (In a private message, if it feels more secure.)

Can you also tell me when you experiencing this issue? When you're doing previews?

Is it a large request? Very large requests can cause CORS issues and the solution in to break the query in to smaller requests.

If you have an screenshots of errors messages in the console etc. that would really help too.

Thanks.

11

This issue has been closed due to inactivity. Flag to reopen.

14

Hi Phil, trying to debug a similar issue as above. This issue started happening yesterday morning and we have not touched any surrounding code for a few weeks. Was there something at Prismic that changed?

15

Hey Steven,

Welcome to the community!

I checked your query in the API browser and it works fine.

The error you're getting is Prismic-Ref missing from header. The reason the API browser works is because it gets the Ref automatically.

What technology are you using to query the API and how are you passing the ref?

16

The error I get is:
Request header field Prismic-ref is not allowed by Access-Control-Allow-Headers.

It works in the API browser but not from the client. If you look at the header I sent I am including the prismic-ref.

This was working mid last week and no changes have been made around this functionality for a long time.

Any help you could provide would be great! I spent all day Friday debugging this without any luck. Weird thing is we have another Prismic account that is currently working fine that uses the same code.

I've also seen another person having this exact problem that seemed to start happening at the exact same time:
https://community.prismic.io/t/access-has-been-blocked-by-cors-policy/2389/6

18

Thank you for the extra information. I'm not really sure what the issue could be here in that case. So I've re-opened this conversation and moved our conversation public so that I can get help from the team. I've also removed any sensitive content from the messages.

Like I said I'll discuss with the devs and find out more about the situation, once I have any update or need any more info, I'll let you know here.

19

Seems to be working for me now.

20

Hey again Steve,

Yeah this seemed to be linked, only to a specific cluster of repositories, so we moved anyone in that group to another cluster.

If you see anymore issues let me know.

Thanks.

1 Like
21

Hi Pill,

This is happening again. Our logs indicate it started happening on November 3rd.

Network error: Request header field Prismic-ref is not allowed by Access-Control-Allow-Headers.

22

Hello Prismic People,

since today the access via the GraphQL API does not work anymore. In the browser console I see the following message:

Access to fetch at 'https://javaminidoodle.prismic.io/graphql?query={%20allContentHubTopics%20{%20edges%20{%20node%20{%20url%20_meta%20{%20tags%20}%20}%20}%20}%20}' from origin 'http://localhost:3333' 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.

The access via the API-Explorer or from a NodeJS-Server works. This is the code:

const prismicResult = await fetch('https://javaminidoodle.prismic.io/graphql?query={ allContentHubTopics { edges { node { url _meta { tags } } } } }', {
  headers: {
    'prismic-ref': '...',
  },
}).then(response => response.json());

Thanks.

1 Like
23

Hi Paulina,

the error occurs on the live site and on test. No matter which query I execute. As an example you can use the following query:

{
  allContentHubTopics {
    edges {
      node {
        url
        _meta {
          tags
        }
      }
    }
  }
}

As already mentioned the access works in GraphiQL (https://javaminidoodle.prismic.io/graphql) or on a NodeJS server. This is only a browser problem. Apparently the "Access-Control-Allow-Origin" header is no longer set. The day before yesterday it all worked fine.

Thank you :slight_smile:

24

I can reproduce this on your repository. Anything from javaminidoodle.prismic.io returns Access-Control-Origin: *, but anything else doesn't return this. It might be linked with this issue?

25

FWIW, I'm running into the same issue as the original poster as of yesterday morning.

2 Likes
26

This started working again for me at some point this afternoon.