CORS Policy: No 'Access-Control-Allow-Origin'

[MrSeanKumar25]

Access to fetch at 'https://*******.myshopify.com/admin/products/xxxxxxxxxxxx/variants.json'
(redirected from 'https://domain.com/admin/products/xxxxxxxxxxxx/variants.json')
from origin 'https://domain.com' 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.

[Jason]

How are you making this fetch request? Hopefully not via the online store theme code as that would expose the Admin API keys to the world.

[MrSeanKumar25]

Hi @Jason,

Thank you for your reply, and yes I am making it from the front end. Is there a way to do it?

[it_s]

We also need to show an external element into Shopify product page based on the related SKU, so into

product-template.liquid

we added line

{% include 'snippet' %}

and so when 

snippet.liquid

looks like this 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<script>
  $(document).ready(function(){
    $("#y").html('<object data="https://www.osculati.com/it/advancedSearchResults.aspx?searchbar=49.548.04" />');
  });
</script>

<div id="y"></div>

it shows the entire external content page see here https://jsfiddle.net/5n7vy6eu/ But we need only the

span class="bar

text. So when trying the Ajax and "snippet.liquid" looks like this

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<script>
  $(document).ready(function(){
    
    $.ajax({
      url: "https://www.osculati.com/it/advancedSearchResults.aspx?searchbar=49.548.04",
      dataType: 'jsonp',
      success: function(json) {
        alert("Success");
      },
      error: function() {
        alert("Error");
      }
    });

  });
</script>

<div id="y"></div>

it gets the CORS error. So how to solve it?