0

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:yyyyyyyyyyyyyyyyyyyyyyy@testing.myshopify.com/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.

Balaji Kandasamy
  • 4,446
  • 10
  • 40
  • 58
Deenadhayalan Manoharan
  • 5,436
  • 14
  • 30
  • 50
  • Read this: http://stackoverflow.com/questions/8414786/javascript-cross-domain-call-call-from-http-to-https – Asken Jan 13 '14 at 09:48

2 Answers2

3

@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.

David Lazar
  • 10,865
  • 3
  • 25
  • 38
  • there are some cases where this would be valid. Such as if you are creating your own APP which only you will use to pull data. @David Lazar – FabricioG Aug 30 '18 at 20:11
  • I won't argue with your fantasies Fabricio. I am sure you can come up with many things that you consider valid, but their security will be in question, hence my answer. The even more correct answer these days, is for the front-end JS to call an App Proxy. I failed to point that out, so I will edit my answer now. – David Lazar Aug 30 '18 at 20:45
  • Too funny... "fantasies" why the jab? As an example I'm writing a script for local adobe Illustrator which needs to pull some data locally to work with it. Sorry I didn't know you'd be insulted at a comment. @David Lazar – FabricioG Aug 30 '18 at 21:21
  • The OP asked about JS with Shopify. If she did it her way, it would be a disaster. So your comment, unless it is specific to her Shopify plan, and my advice to steer clear, has no merit. Of course you can do whatever you want with whatever, and ya, sure script Illustrator, but that has ZERO to do with this whole conversation, so why? – David Lazar Aug 30 '18 at 21:25
-1

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://.

positivew
  • 700
  • 7
  • 14