API - Working in Postman - ERROR Shopify - blocked by CORS policy - No 'Access-Control-Allow-Origin'

Highlighted
Shopify Partner
3 0 2

Hi Shopify Forums Members,

I just wanted to say upfront thank you in advance with any help you can provide us with regarding how to overcome the issue I'll outline in sections below so it is as clear and easy to follow as possible.

 

Warmest Regards,

Casey

 

Background:
We are having an issue with a solution we have built that passes the data from the "contact us" form (built using the Form Builder App - provided by Hulk Apps) on the Shopify store (www.thehound.co) into Gorgias the customer support tool. We have been working with the team at hulk apps to achieve this using their API.

We have built a solution that works. We are able to fetch the data from the HULK Apps form response and are able to create the API in the postman to test and it's working fine on postman.

 

However, we have now hit a hurdle when we try to deploy the same script on the Shopify store we are receiving an error message (see below).

 

ERROR: Access to XMLHttpRequest at 'https://thehound.gorgias.io/api/tickets/' from origin 'https://www.thehound.co' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

 

Question:
Can you please advise us on how we can avoid this error and execute the API?

 

FYI - Other related information for your reference:


PERSISTENT ISSUE DETAILS


Tested the same and issue still exists (See screenshot below)
Screenshot: https://www.dropbox.com/s/bcpv13tyejm99nc/Screen%20Shot%202020-02-24%20at%201.10.04%20PM.png?dl=0

Here is the script that we're using in duplicate theme page.faq.liquid file (see below)
<script>
var data = JSON.stringify({"messages":[{"channel":"email","body_html":"<div>First Name: harmanpreet</div><div>Last Name: singh</div><div>Email: harman@Gmail.com</div><div>Subject: Returns & Exchange</div><div>Message: Message</div><div>Order Number: Order Number</div><div>Reason for Return: Faulty</div><div>Item Name: Item Number</div><div>Item Quantity: 22</div><div>Please provide details of the fault with your item: Faulty product</div><div><image src='https://form-builder-by-hulkapps.s3.amazonaws.com/uploads/userupload/img-1_dae8ac5b-88ba-4960-a914-e5d3d00b6bc8.jpg'></div>","via":"api","receiver":{"id":245078175},"from_agent":"true","sender":{"id":257635544},"source":{"type":"email","from":{"id":257635544,"name":"Casey Schneeberger","address":"accounts@thehound.co"},"to":[{"id":245078175,"name":"Harmanpreet Singh","address":"harman.decosoftsolutions@gmail.com"}]}}]});

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

xhr.addEventListener("readystatechange", function() {
if(this.readyState === 4) {
console.log(this.responseText);
}
});

xhr.open("POST", "https://thehound.gorgias.io/api/tickets/");
xhr.setRequestHeader("Content-Type", "application/json");
xhr.setRequestHeader("Authorization", "Basic aGVsbG9AdGhlaG91bmQuY286ZjJhYWVhYWNhMzAxZWYyMjBiNDYyZmQ2ZjA2MjAwNTQ1MTUyYjMwZjhmODFlNjU2NWQxNjRhYjhiMmNhNzE1OA==");
xhr.setRequestHeader("Access-Control-Allow-Origin", "*");

xhr.send(data);
</script>
0 Likes
Highlighted
Shopify Staff (Retired)
Shopify Staff (Retired)
624 102 125

Hey @casey22 ,

 

My initial recommendation to you would be to not try to make an AJAX/XMLHttpRequest from your Shopify storefront (i.e. from your theme page.faq.liquid file). Right now, any person that goes to your site and inspects your code (and any person viewing this forum question) will see the Basic Auth authorization token you are using to connect to "https://thehound.gorgias.io/api/tickets/", and with this authorization token they can potentially do malicious things to that API endpoint. 

 

It would be better for you to make API requests through a server-side/back-end application instead of doing it right on your storefront. The other option would be to utilize an app proxy on Shopify (https://shopify.dev/tutorials/display-data-on-an-online-store-with-an-application-proxy-app-extensio...). 

 

Hassain | Developer Support Specialist @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Click Accept as Solution 

0 Likes
Highlighted
Shopify Partner
3 0 2

Hi  @hassain ,

Thank you so very much for the feedback.

 

Can you please provide an example for this recommendation you made -  "It would be better for you to make API requests through a server-side/back-end application instead of doing it right on your storefront." - so that we can try to implement it as you have suggested?

Basically we are using the Hulk Apps Form Builder App and once the form is submitted on the front-end of Shopify we want to get the data that was submitted and further send the same to Gorgias. And in Form Builder we have the call-back section where we can write the code which will execute after successfully submitting the form.

Many thanks in advance!

Casey

0 Likes
Highlighted
Shopify Staff (Retired)
Shopify Staff (Retired)
624 102 125

Hey @casey22 ,

 

Thanks for all of that additional context, that is super helpful to me.

 

Based on what you described, it would be tricky to accomplish that for your Shopify store with a back-end/server-side application (since it would require user data to be submitted on the front-end to be saved somewhere in Shopify metafields or tags, then read by your back-end app using a webhook or the Shopify Admin API, and finally then sent to Hulk Apps via their API). However your use case sounds like the perfect use case for using an App Proxy. I would definitely recommend your team looking into using this technology to fulfil the use case you are looking for:

https://shopify.dev/tutorials/display-data-on-an-online-store-with-an-application-proxy-app-extensio...

https://www.cryptextechnologies.com/blogs/how-to-use-app-proxy-in-shopify

https://medium.com/shop-sheriff/what-is-a-shopify-application-proxy-and-how-can-i-use-it-153bf99d1a9...

 

Hassain | Developer Support Specialist @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Click Accept as Solution 

0 Likes
Highlighted
New Member
3 0 0

Hi @hassain,

 

Our developer has asked if there is any chance if you could please provide us with a working example or code so that they can implement it at our end. As they have said that they are not very familiar with the app proxy implementation. Any assistance on this front would be so greatly appreciated!

Many thanks in advance!

 

Casey

0 Likes
New Member
3 0 0

Hi @hassain,

 

We are still stuck with no further development - Is there any way you could please provide us with a working example of code as ur developer has said he and his team are not very familiar with the app proxy implementation. If not are you able to give us a recommendation of who we could contact (and hire) that is familiar with it? Or where we could find someone with this knowledge and skillset?


As always any assistance on this front would be so greatly appreciated!

Many thanks, again!

 

Casey

0 Likes
Highlighted
Shopify Staff (Retired)
Shopify Staff (Retired)
624 102 125

Hi @accounts3435 ,

 

Unfortunately I have no code I can share. However building an application proxy is pretty straightforward - as the App all you need to do is simply build a website or web application that is hosted on your own external servers. Then through the Shopify Partners portal, all you need to do is set-up the configuration so that a specified page from the Shopify store will be forwarded to your app's external website or web application. Your website/web application should also build in logic to check the `signature` pannel from the request so it knows when it's getting requests sent by Shopify. This is all detailed here: https://shopify.dev/tutorials/display-data-on-an-online-store-with-an-application-proxy-app-extensio...

 

Alternatively if you want to hire someone, you can look into getting a Shopify Expert to help you out: https://experts.shopify.com/

Hassain | Developer Support Specialist @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Click Accept as Solution 

0 Likes
Highlighted
New Member
3 0 0

Hi @hassain,

Thank you so very much! I think your explanation has helped to clarify a lot for me personally about what is going to involved in the process, hopefully, it also does for our developer who is working on this task. I will update you in any case with the outcome!

Thank you again I am very grateful for your advice and guidance!

My best wishes to you and your family, friends and colleagues I hope they can all stay safe and healthy at this difficult time!

0 Likes