How can I can change CORS policy for my account

Developing with Prismic
1

I am using Prismic for website content serving purpose and management. Now I am trying to use for my mobile application as well. I am using apollo apollo-link library to connect to Prismic Graphql server. As a start, when I tried to from local system, i am started having this below CORS issue.

Access to XMLHttpRequest at 'https://mahaseelarticles.prismic.io/graphql' from origin 'http://localhost:8103' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

How can I change the CORS setting for my Acc graphql server, so that I move forward ?

5

Hi Mahaseel,

Welcome to Prismic community.

In order to be able to help you on this, I need to have a look at the query you are doing, in some cases this issue can come from using long queries.

It would be great if you can share a code snippet with us.

Looking forward to your reply,
Fares

6

I have the same issue. Testing on localhost using graphql and a query that works interactively, I’m getting a cors error.

7

Following up in case others run into this, after re-reading the docs I see that Prismic only supports GET vs POST, which is the standard most libraries use. I’ve been able to get things working with the custom prismic Apollo link.

Here’s the snippet that works:

import { PrismicLink } from “apollo-link-prismic”;
import { InMemoryCache, IntrospectionFragmentMatcher } from “apollo-cache-inmemory”;
import ApolloClient from “apollo-client”;
import gql from “graphql-tag”;

const client = new ApolloClient({
link: PrismicLink({ uri: “https://your-prismic-project.prismic.io/graphql”, }),
cache: new InMemoryCache({
fragmentMatcher: new IntrospectionFragmentMatcher({ introspectionQueryResultData: { __schema: { types: , }, }, })
})
});

async function runQuery(query, variables = null) {
const result = await client.query({query, variables});
if (result) return result.data;
else return null;
}

// call it as:
const QUERY = gql query Pages ($type: String) { _allDocuments (type: $type) { edges { node { _meta { id, uid, type, } } } } };

funQuery(QUERY, {type:“foo”}).then(data => {
…
});

1 Like
8

Hi Worthee,

Thank you for sharing this solution with Prismic community it is really appreciated.