origin has been blocked by CORS policy Response to preflight request doesn't pass access control check

Question

Hello I am using Jqgrid and I want to display all orders list in JqGrid , But order data not display in Jqgrid . Any Expert can tell me what is the problem in my code and why data is not display in my jqgrid .First when grid load there no error show only show on grid "error" , but when I refresh grid then show this error :

Access to XMLHttpRequest at 'http://api.bigcommerce.com/stores/4jwabif3gj/v2/orders.json' from origin 'http://localhost:62797' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.

HTML

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

JQuery

   <script type="text/javascript">

    jQuery(document).ready(function ($) {
        var $grid = $("#JqGrid");
        $grid.jqGrid({
            url: 'http://api.bigcommerce.com/stores/4jwabif3gj/v2/orders.json',
            datatype: 'json',
           ajaxGridOptions: { xhrFields: { withCredentials: true } }, 

           colNames: ['id', 'billing_address', 'date_created', 'date_modified', 'date_shipped', 'status'],
            colModel: [
                { name: 'id', index: 'id', width: 10 },
                { name: 'billing_address', index: 'billing_address', width: 50 },
                { 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: "Employees",
            pager: "#JqGridPager",
            loadBeforeSend: function (jqXHR) {
                jqXHR.setRequestHeader("X-Auth-Client", 'clientstring', "X-Auth-Token", 'tokenid');
            },
            viewrecords: true,
            width: 1100,
            height: 400
        });
        $grid.jqGrid('navGrid', '#JqGridPager', { edit: false, add: false, del: false })
    });
</script>

Answer 1

If you really really want to use that site I think your only option is to proxy it through a web site that you DO control. On your site, enable and support CORS, your page calls your service, your service calls the destination and passes the response through to your page.

While this is a technically correct answer that will unblock you, I think you should consider that you are using someone else's resource for your own purpose. They probably block CORS accesses for a reason. Following this suggestion may violate the terms of use of that site and you do so at your own peril.

Either contact the site and work out a deal for your needs or find a different source of whatever data they have that you want.