在Shopify中创建定制产品

我需要通过Shopify店面创建定制产品

文档链接：

我尝试了以下代码：

$('#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({
网址：'https://xxxxxx:yyyyyyyyyy@rmisys.myshopify.com/admin/products.json'，
键入：“POST”，
contentType:'应用程序/json'，
数据类型：“json”，
数据：{
“产品”：{
“标题”：“Burton Custom Freetlye 151”，
“body_html”：“好的滑雪板！”，
“卖方”：“伯顿”，
“产品类型”：“滑雪板”，
“标签”：“巴诺，约翰的最爱”，“大空气”
}
},
成功：功能（响应）{
控制台日志（响应）；
},
错误：函数（xhr）{
console.log（xhr.statusText）；
}
}).完成（功能（数据）{
控制台日志（数据）；
});
});

上述代码显示了ajax请求时Chrome控制台中的以下错误：

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

---

经过长时间的寻找，我找到了解决办法

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

这用于防止CSRF保护

在大多数情况下，API应接受具有相同来源策略的请求

所以

如果我们从“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>

window.onload=RedirNonHttps（）；
函数RedirNonHttps（）{
if（location.href.indexOf（“https:/”）==-1）{
location.href=location.href.replace（“http://”、“https://”）；
}
}

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

---

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

请记住。如果你成功地用CORS解决了这些琐碎的问题，你将在公共场合向像我这样的人公开你的商店。我将能够删除您的所有资源。我可以用我想要的任何东西替换你的存货

---

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

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