CODEWITHSUNDEEP
jsonshopify
Deenadhayalan Manoharan
Deenadhayalan Manoharan

Reputation: 5444

"No 'Access-Control-Allow-Origin'" Error while sending JSON Request to Shopify

I have Shopify account. In the Admin panel, Admin can add any number of products into Shopify store.

But I need to register Custom Product by the public user from my Shopify Store through the Client side.

i have tried the following code.

$('#send').click(function() {

        $.ajax({

                /* xxxx...  : Api key
                   yyyy...  : password */
            url: 'https://xxxxxxxxxxxxxxxxxxxxxxxxxx:[email protected]/admin/orders.json',
            type: 'POST',
            dataType: 'json',
            data: {
                  "product": {
                    "title": "Burton Custom Freestlye 151",
                    "body_html": "<strong>Good snowboard!</strong>",
                    "vendor": "Burton",
                    "product_type": "Snowboard",
                    "tags": "Barnes & Noble, John's Fav, \"Big Air\""
                  }
                },
            success: function(response) {

                alert(response);
            }

        });

    });

I am getting the following error:

XMLHttpRequest cannot load https://testing.myshopify.com/admin/orders.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://testing.myshopify.com' is therefore not allowed access.

Upvotes: 0

Views: 4457

Answers (2)

David Lazar
David Lazar

Reputation: 11427

@Deena. In case you missed it this use of Javascript is horribly insecure.

You are making your API keys public and hence anyone can alter or erase your entire shop.

Instead create a private App that you can properly control security wise, and use Javascript in a controlled fashion without exposing your API keys to the world.

You will be amazed at how quickly your reputation will be destroyed if you deploy unsafe code like this and your client ends up responsible for very bad things happening.

For anyone else drifting into this topic, your front-end JS can do this by calling an App Proxy, providing security and the ability to muck about with the RestAPI or the GraphQL approach.

Upvotes: 3

positivew
positivew

Reputation: 750

The problem here is that your origin is insecure (http://) and resource is secure (https://). This causes the browser to treat them as different domains and since your resource (orders.json) doesn't specify that requests from http:// version of the URL should be allowed, the request fails, because by default cross-domain requests are forbidden for security considerations. You should be able to run the same script, if you access the page where your script runs via https://.

Upvotes: -1

Related Questions