使用bigcommerce API MVC，没有“ Access-Control-Allow-Origin”标头存在错误

Question

我正在使用大型商务API来获取订单清单，我尝试了很多解决方案。

这是我面临的错误..

api.bigcommerce.com/stores/4jwabif3gj/v2/orders.json?search=false&nd=1541740677952&rows=20&page=1&sidx=&sord=asc:1无法加载资源：服务器的响应状态为401（未经授权）索引：1从来源' http：// localhost：62797 '在' https://api.bigcommerce.com/stores/4jwabif3gj/v2/orders.json?search=false&nd=1541740677952&rows=20&page=1&sidx=&sord=asc '访问XMLHttpRequest已被CORS政策阻止：对预检请求的响应未通过访问控制检查：所请求的资源上没有“ Access-Control-Allow-Origin”标头。

HTML

<table id="JqGrid"></table>
<div id="JqGridPager"></div>

jQuery的

<script type="text/javascript">

    jQuery(document).ready(function ($) {

        var $grid = $("#JqGrid");
        $grid.jqGrid({
            url: 'https://api.bigcommerce.com/stores/4jwabif3gj/v2/orders.json',
            ajaxGridOptions: { xhrFields: { withCredentials: true } }, 
            dataType: 'json',
            colNames: ['id', 'date_created', 'date_modified', 'date_shipped', 'status'],

            colModel: [
                { name: 'id', index: 'id', width: 10 },
                { name: 'date_created', index: 'date_created', width: 50, sorttype: 'date', datefmt: 'Y-m-d' },
                { name: 'date_modified', index: 'date_modified', width: 50, sorttype: 'date', datefmt: 'Y-m-d' },
                { name: 'date_shipped', index: 'date_shipped', width: 50, sorttype: 'date', datefmt: 'Y-m-d' },
                { name: 'status', index: 'status', width: 50 },
            ],
            caption: "Order list",
            pager: "#JqGridPager",
            loadBeforeSend: function (jqXHR) {
                jqXHR.setRequestHeader("X-Auth-Token", 'modebafppdxh9sd90zffehu9wwgpj3d', "X-Auth-Client", '535bnhhfkqblu7ebg1aq9r6kue1lgv6');
            },
            //ajaxGridOptions: {

            //    beforeSend: function (xhr) {
            //        xhr.setRequestHeader("X-Auth-Token", "modebafppdxh9sd90zffehu9wwgpj3d", "X-Auth-Client", "535bnhhfkqblu7ebg1aq9r6kue1lgv6");

            //    }
            //},
            viewrecords: true,
            width: 1100,
            height: 400
        });
        $grid.jqGrid('navGrid', '#JqGridPager', { edit: false, add: false, del: false })
    });
</script>

Answer 1

根据StackOverflow上的答案以及BigCommerce支持论坛上的该线程 ，BigCommerce API不支持CORS。 这似乎是一个安全问题，通常不建议从客户端发出API请求。

从BigCommerce API访问信息的推荐方法是通过从安全的第三方服务器对该API进行调用，然后从您的Web应用程序查询该第三方服务器。

Answer 2

根据您尝试访问的信息，可以使用“服务器到服务器”请求或Storefront API。

根据您的用例，最好使用Server to Server API。 文档中概述了两者之间的区别。 这应该可以帮助您确定哪个更适合您的应用程序。

要仅返回订单列表，可以在此处使用此API端点。 要在店面捕获订单数据，可以在此处使用此端点。