shopify - 在 Shopify 中创建自定义产品

Question

我需要通过 创建自定义产品Shopify 店面 .

文档链接:http://docs.shopify.com/api/product#create

我尝试了以下代码:

$('#addProduct').click(function() {
        $.ajax({
            url:'https://xxxxxx:yyyyyyyyyy@rmisys.myshopify.com/admin/products.json',
            type: 'POST',
            contentType : 'application/json',
            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) {
                console.log(response);
            },
            error: function(xhr) {
                console.log(xhr.statusText);
            }
        }).done(function(data) {
            console.log(data);
        });
    });

上面的代码在 ajax 请求时在 Chrome 控制台中显示以下错误:

OPTIONS https://rmisys.myshopify.com/admin/products.json 405 (Not Allowed) jquery-1.10.2.js:8706 OPTIONS https://rmisys.myshopify.com/admin/products.json No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://rmisys.myshopify.com' is therefore not allowed access. jquery-1.10.2.js:8706 XMLHttpRequest cannot load https://rmisys.myshopify.com/admin/products.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://rmisys.myshopify.com' is therefore not allowed access. design-your-shirt:1 error

Answer 1

找了半天，终于找到了解决办法。

问题是跨域资源共享(CORS) .

http://en.wikipedia.org/wiki/Cross-origin_resource_sharing

这用于防止 CSRF 保护 .

https://docs.djangoproject.com/en/1.4/ref/contrib/csrf/

在大多数情况下，API 应该接受带有 的请求。同源政策
http://en.wikipedia.org/wiki/Same-origin_policy

所以，

如果我们从“http”主机请求，我们从 Shopify 收到以下 AJAX 请求错误:

No 'Access-Control-Allow-Origin' header is present on the requested resource.

解决方案是当用户使用“ http ”协议(protocol)访问我们的网站时，将用户重定向到“ https ”。

我尝试使用以下附加代码并成功添加了自定义产品。

<script>
window.onload = RedirNonHttps();

function RedirNonHttps() {
    if (location.href.indexOf("https://") == -1) {
        location.href = location.href.replace("http://", "https://");
    }
}
</script>

注意:如果我们使用脚本从客户端添加自定义产品，这是不安全的，因为 key 是公开可用的，用户可以使用该 API key 做任何他们想做的事情。因此，请保持安全身份验证，然后客户端脚本与该安全身份验证进行交互。

我希望这个答案能为初学者提供 CORS(跨源资源共享)的想法。