CORS policy error on fetch request

Shopify Discussion

Topic summary

A developer is encountering a CORS (Cross-Origin Resource Sharing) policy error when making fetch requests to their Shopify Admin API GraphQL endpoint from their browser.

Technical Context:

  • The code attempts to fetch metaobject data from https://ynottony.co.uk/admin/api/2023-01/graphql.json using a private app access token
  • The fetch request includes proper authentication headers (X-Shopify-Access-Token)
  • The code successfully parses and displays various metaobject fields (title, client, services, gallery images, etc.)

The Issue:
After recently adding an existing GoDaddy domain as the primary domain in Shopify settings, the site now displays at ynottony.co.uk, but browser-based fetch requests trigger CORS errors. The setup previously worked fine before the domain change.

Current Status:
The developer has generated their API token through a private app and is seeking solutions to resolve the CORS policy error in the browser. The discussion remains open with no resolution provided yet.

Summarized with AI on November 22. AI used: claude-sonnet-4-5-20250929.
1 
fetch('https://ynottony.co.uk/admin/api/2023-01/graphql.json', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'X-Shopify-Access-Token': 'API_TOKEN_HERE'
  },
  body: JSON.stringify({ query })
})
.then(response => response.json())
.then(async data => {
  
  const topbannerImage = await imgURL(data.data.metaobject.bannerimage.value);
  topImg.setAttribute('src', topbannerImage);
  
  const aboutClientValue = JSON.parse(data.data.metaobject.about_client.value).children[0].children[0].value;
  const theKeywordValue = JSON.parse(data.data.metaobject.the_keyword.value).children[0].children[0].value;
  const theSolutionValue = JSON.parse(data.data.metaobject.solutions.value);
  const thesolutionparagraphs = theSolutionValue.children.filter(child => child.type === "paragraph");
  let theSolutionParagraphsText = "";
  thesolutionparagraphs.forEach(paragraph => {
    theSolutionParagraphsText += '<p>' + paragraph.children[0].value + '</p>';
  });
  
  document.getElementById('p-title').innerHTML = data.data.metaobject.title.value;
  document.getElementById('p-client').innerHTML = data.data.metaobject.client.value;
  document.getElementById('p-services').innerHTML = data.data.metaobject.services.value;
  document.getElementById('p-citycountry').innerHTML = data.data.metaobject.city_country.value;
  document.getElementById('p-about-client').innerHTML = aboutClientValue;
  document.getElementById('p-the-keyword').innerHTML = theKeywordValue;
  document.getElementById('p-the-solution').innerHTML = theSolutionParagraphsText;
  document.getElementById('p-category').innerHTML = data.data.metaobject.category.value;
  document.getElementById('p-keywords').innerHTML = data.data.metaobject.keywords.value;
  document.getElementById('p-designed-by').innerHTML = data.data.metaobject.designed_by.value;

  const galleryImages = document.getElementById('gallery');
  const galleryImageIds = JSON.parse(data.data.metaobject.gallery_images.value);
  const galleryImageUrls = await Promise.all(galleryImageIds.map(async (imageId) => {
    return await imgURL(imageId);
  }));
  
  galleryImageUrls.forEach((imageUrl) => {
    const img = document.createElement('img');
    img.setAttribute('src', imageUrl);
    galleryImages.appendChild(img);
  });
  
});

I am doing some fetch request on admin api to retrieve metaobject data. It was working fine but recently i added existing godaddy domain as primary in domain settings and now my shopify site show up at ynottony.co.uk as it should but the thing is it is giving me cors-policy error on fetch request.

cors-error.png
cors-error.png1899×117 12.5 KB

I generated my token through by creating private app. Now how do i fix this cors-policy error in browser. Please suggest solutions.

Thanks