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>