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>

You have to enable CORS header on that domian. Read more from here - https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS — front_end_dev, Nov 08 '18 at 10:58
I read the documentation bigcommerce mention CORS Header not support. how to enable in mvc c# any method OR How to use without cors header . @front_end_dev — ZEESHAN AKRAM, Nov 08 '18 at 11:21
Adding CORS support in C# mvc application https://stackoverflow.com/questions/6290053/setting-access-control-allow-origin-in-asp-net-mvc-simplest-possible-method — front_end_dev, Nov 08 '18 at 12:13
See below. If you know an allowed origin you can configure your local machine to look as if it is in the loved ones list. In IIS this is relatively simple and there are tons of docs on the web. I used to do this for a past project and it works ok to develop. However you ultimately have to be making calls coming from an origin allowed by the resource you are calling. — No Refunds No Returns, Nov 08 '18 at 13:52
I also disable chrome security : show only error show error: Unauthorized 401 Unauthorized X-Auth-Client and X-Auth-Token headers are required I also put these two . can you tell where I am wrong . I have past these two line in my code . @No Refunds No Returns — ZEESHAN AKRAM, Nov 08 '18 at 13:56
@user2697533: try to add the jqGrid option `ajaxGridOptions: { xhrFields: { withCredentials: true } }`, which forwards `xhrFields: { withCredentials: true }` option to all underlying Ajax calls (see [jQuery.ajax documentation](http://api.jquery.com/jquery.ajax/)) — Oleg, Nov 08 '18 at 18:26
Thanks for reply . I add this line which you have share me but still not working . This error show Failed to load resource: the server responded with a status of 401 (Unauthorized) Index:1 Access to XMLHttpRequest at 'https://api.bigcommerce.com/stores/4jwabif3gj/v2/orders.json?_search=false&nd=1541704534112&rows=20&page=1&sidx=&sord=asc' from origin 'http://localhost:62797' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. — ZEESHAN AKRAM, Nov 08 '18 at 19:16
and when I click this line then display this is line: X-Auth-Client and X-Auth-Token headers are required. @Oleg — ZEESHAN AKRAM, Nov 08 '18 at 19:17
i have update my code i have add line which you have share with me . @Oleg — ZEESHAN AKRAM, Nov 08 '18 at 19:18
Do you have an actual relationship with bigcommerce.com? They should provide either a way to get a token by identifying your account to their API or perhaps they provide a token directly. You will need to contact the site owner to understand what values they expect in those headers. You are outside the scope of SO at this point and into a specific business relationship. — No Refunds No Returns, Nov 10 '18 at 13:16
The provide me Token and I also put in javascript code but give me a error , error put above comments.@No Refunds No Returns — ZEESHAN AKRAM, Nov 10 '18 at 13:24

No Refunds No Returns · Accepted Answer · 2019-05-20T15:06:28.873

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.

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

1 Answers1