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

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

Hey @a.lipka89 and @sbaughman, I've merged out previews conversation into this one, since we're discussing the same topic.

Thanks for informing us about this issue reappearing. We're going to inform the dev team and gather more information to be able to communicate a solution for everyone.

Thank you

Any update here? It has pretty much brought down the site using this Prismic project. Previously Prismic fixed this my moving the project to a new cluster?

Hi Steven,

Apparently the fix for this was rolled out, can you test again please?

Thank you.

Still running into this issue.

OK, I'm following up now.

OK, can you try one more time?

@Phil - I'm seeing the same issue in iOS Safari 12 & 13.

Tech: Next.js with SWR (https://swr.vercel.app), GraphQL, Apollo

Error: "Failed to load resource: Request header field Content-Type is not allowed by Access-Control-Allow-Headers."

Browsers: iOS Safari 12 & 13

Fetch with apollo-link-prismic, @apollo/client and graphql-tag - all using latest

import { PrismicLink } from "apollo-link-prismic";
import { ApolloClient, InMemoryCache } from "@apollo/client";
import gql from "graphql-tag";

// Prismic API
const REPOSITORY = "REPONAME";
const GRAPHQL_API_URL = `https://${REPOSITORY}.prismic.io/graphql`;
const API_TOKEN =
  "APITOKEN";

// Exported fetcher call
// * @param  {Object} query GraphQL query
export default async function fetcher(query) {
  const client = new ApolloClient({
    link: PrismicLink({
      uri: GRAPHQL_API_URL,
      accessToken: API_TOKEN,
    }),
    cache: new InMemoryCache(),
  });

  return await client
    .query({
      query: gql`
        ${query}
      `,
    })
    .then((res) => {
      return res.data;
    })
    .catch((err) => {
      const error = new Error(err);
      throw error;
    });
}

Sample query

`{
    allProducts {
      edges {
        node {
          meta_title
        }
      }
    }
  }
`

Hey Nathan,

Can you tell me the name of your repository so I can investigate this? You can send it in a private message if you don't want to share it here.

I run into the CORS issue also but it is strange because it works with this query:

query SearchQuery($searchterm: String, $lang: String) {
  _allDocuments(fulltext: $searchterm, lang: $lang) {
    edges {
      node {
        _meta {
          uid
          type
        }
    }
  }
}

but it throws a CORS error with this query:

query SearchQuery($searchterm: String, $lang: String) {
  _allDocuments(fulltext: $searchterm, lang: $lang) {
    edges {
      node {
        _meta {
          uid
          type
        }
        ... on PRISMIC_News_item {
          title
          _meta {
            uid
            type
          }
        }
      }
    }
  }
}

from origin 'http://localhost:8000' 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.

Any suggestion would be welcomed, thanks.

I am having the exact same CORS issue as @nathan. Similar setup with apollo-link-prismic and @apollo/client. It is happening for me in dev and production. iOS version which fails for me is at least 12.4. iOS 13.5 is working. I tried both versions with iOS Simulator and the iOS 12.4 also on a real iPad. Any updates on this?

Hey Everyone,

When you run in to CORS issue can you try clearing the cache of you application. @bastianschadeberlin Can you try this now to see if it helps?

I'll hopefully be putting together a troubleshooting for CORS soon to make this clearer.

I am not sure what kind of cache you are referring to. Our project is a next.js app. The error happens in local dev mode and on any new deployment in production, so there should be no caching problem on the application level. This seems to be a problem with some Safari versions and the Prismic GraphQL api. Besides the mentioned iOS versions I got some failing feedback from someone using a Sarai 12 version on a mac. This does not happen for the latest Safari. But the 12.x Safari and the iOS versions are not "that old". So it would be good if the api works for those as well.

@Phil Here is how you can reproduce the issue. If you don't have access to a real iOS device running iOS 12.4 you could use the iOS Simulator. Install the simulator for version 12.4 and run an iPad there. In the simulator open safari and navigate to Prismic example project at https://prismic-graphql-pagination.netlify.app/all-posts. Open Safari on the mac and use the Developer tools to open a console connected to the Safari in the simulator. There you should see the failing calls to the Prismic graphql api. See screenshot I did on my mac:

Hi there,

I'm Fares from the education team, I have been able to reproduce the CORS issue on IOS 12.4 with the simulator, and here are my test results.

And here is Gist where I have compared the request headers from safari ISO 12.4 and the a test I did in Chrome

I even tried to copy the request headers and do the same query in Chome and it works fine.

I don't know from where is this issue so I will escalate to our dev team to dig deeper into it and I will let know when you have any updates.

Best,
Fares

1 Like

I'm having similar CORS issues with iOS 11 in Safari. I'm making the calls using apollo-client 2.6.10 in React 17.0.1. Is there any sort of workaround?

Screen Shot 2021-02-04 at 2.08.11 PM

Hi guys,

i'm having these CORS issues described in this thread.

I described my problem here also on Stack Overflow: graphql - CORS issue with Nuxt, Prismic and Apollo - Stack Overflow

Can you please enlighten me on what I need to do?

Hi there,
This seems to be a tricky issue, I've been able to reproduce this issue on IOS 12.4 but for us this a corner issue for your dev team.

If someone can reproduce and post the reproduction of this issue on a desktop browser or recent IOS/Android system it will be very helpful.

Looking forward to your reply,
Fares

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