No 'Access-Control-Allow-Origin' header is present error using bigcommerce api mvc

Question

我正在使用 big commerce 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 上的 this answer 和 BigCommerce 支持论坛上的 this thread，BigCommerce API 不支持 CORS。这似乎是一个安全问题，通常不鼓励从客户端发出 API 请求。

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

Answer 2

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

根据您的用例，最好使用服务器到服务器 API。 documentation 中对每个之间的差异进行了概述。这应该可以帮助您确定哪个更适合您的应用程序。

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