Calling Google Cloud Function from within a Shopify page.

Solved
Andrew-Werling
Tourist
10 1 2

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);
        };

 

Accepted Solution (1)

Accepted Solutions
Andrew-Werling
Tourist
10 1 2

This is an accepted solution.

Was able to figure this out. Was an error with my google cloud function and not something within shopify or my js code. 

https://cloud.google.com/functions/docs/writing/http#functions_http_cors-python

View solution in original post

Reply 1 (1)
Andrew-Werling
Tourist
10 1 2

This is an accepted solution.

Was able to figure this out. Was an error with my google cloud function and not something within shopify or my js code. 

https://cloud.google.com/functions/docs/writing/http#functions_http_cors-python

View solution in original post