在 Shopify 中创建自定义产品答案

【问题标题】：Create Custom Product in Shopify在 Shopify 中创建自定义产品
【发布时间】：2014-01-15 10:41:56
【问题描述】：

我需要通过 Shopify Storefront 创建自定义产品。

文档链接：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 控制台中显示以下错误：

选项https://rmisys.myshopify.com/admin/products.json 405（不允许）jquery-1.10.2.js:8706 选项https://rmisys.myshopify.com/admin/products.json 请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，Origin 'http://rmisys.myshopify.com' 不允许访问。 jquery-1.10.2.js:8706 XMLHttpRequest 无法加载 https://rmisys.myshopify.com/admin/products.json。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，Origin 'http://rmisys.myshopify.com' 不允许访问。设计你的衬衫：1 错误

【问题讨论】：

标签： shopify

【解决方案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 请求的以下错误：

请求的资源上不存在“Access-Control-Allow-Origin”标头。

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

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

<script>
window.onload = RedirNonHttps();

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

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

我希望这个答案能给初学者提供 CORS（跨域资源共享）的想法。

【讨论】：

【解决方案2】：

只要记住。如果您确实成功地解决了 CORS 的这些琐碎问题，那么您将使用您的 API 密钥将您的商店公开给像我这样的人。我将能够删除您的所有资源。我可以用我想要的任何东西替换你的库存。

你不能像这样使用 Javascript。这太荒谬了。创建一个可以正确使用 oAuth 进行身份验证的安全应用程序。然后使用您的 Javascript 与该应用程序对话。否则，你会遇到麻烦，因为有人会让你看起来很傻。

【讨论】：

对吗？这不是 shopify 应用和应用代理应该解决的问题吗？
是的。确切地。令我惊讶的是，有多少人仍然不了解 Javascript 的基础知识。应用代理可让您进行安全可靠的 XHR 调用，而不会出现 CORS 问题。