I’m trying to call a Google Cloud Function from within a page on my Shopify site.
When I call it I get a CORS error.
{{ page name }}:1 Access to XMLHttpRequest at '{{my cloud function url}}' from origin '{{ my shopify website url }}' has been blocked by CORS policy: Response to preflight request doesnt pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
I thought this would work since I am using google’s could function service as middleware to call Shopify’s GraphQL API.
Do I have to create a custom app to do this?
Do I need to add “Access-Control-Allow-Origin” header to my google cloud function?
Here is the JS I’m calling from within my page. It’s triggered when a user is sent to the page by a specific redirect address.
function tagUpdate(){
var url = "{{my cloud function URL}}";
var xhr = new XMLHttpRequest();
xhr.open("POST", url);
xhr.setRequestHeader("Accept", "application/json");
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
console.log(xhr.status);
console.log(xhr.responseText);
}};
var data = `{
"gcid": {{customer.id}},
"tags": "{{ tag(s) I wish to add to customer account }}"
}`;
xhr.send(data);
};