在Shopify中创建自定义产品

kpmDev 发表于 Dev

kpmDev

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

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

我尝试了以下代码：

$('#addProduct').click(function() {
        $.ajax({
            url:'https://xxxxxx:[email protected]/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'标头出现在请求的资源上。因此，不允许访问原始站点“ http://rmisys.myshopify.com ”。jquery-1.10.2.js：8706 XMLHttpRequest无法加载https://rmisys.myshopify.com/admin/products.json。请求的资源上不存在“ Access-Control-Allow-Origin”标头。因此，不允许访问原始站点“ http://rmisys.myshopify.com ”。设计您的衬衫：1个错误

kpmDev

经过很长时间的搜索，我找到了解决方案。

问题是跨域资源共享（CORS）。

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

这用于防止CSRF保护。

https://docs.djangoproject.com/zh-CN/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（跨源资源共享）的想法。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。