How to consume Web API without server side code, using only Ajax

Question

I Added the following two host entries to my host file:

127.0.0.1 na_api.com

127.0.0.1 na_upload.com

The 127.0.0.1 na_api.com is used to retrieve some data from a database and return JSON, while the 127.0.0.1 na_upload.com is a website that consumes the API.

Currently, I have the following Ajax call, to call the API and get some data. Here is the Ajax call:

this.ajaxRetrieve = function (url, data, onSuccessCallback) {
    $.ajax({
        url: url,
        data: data,
        type: 'GET',
        crossDomain: true,
        onsuccess: function (result) {
            onSuccessCallback(result);
        }
    });
}

The above outputs the following error:

No 'Access-Control-Allow-Origin' header is present on the requested resource

How can I work around this, without the needs of a back-end server side code like .Net or something?

This might be useful to you https://stackoverflow.com/questions/20035101/no-access-control-allow-origin-header-is-present-on-the-requested-resource — Mohd Sadiq, Jun 07 '17 at 12:29
Just updated my code to use the CORS example, I still get the same problem — monstertjie_za, Jun 07 '17 at 12:56

score 1 · Answer 1 · answered Jun 07 '17 at 13:28

use JSONP

$.ajax({
                                url: url,
                                type: 'GET',
                                crossDomain: true,
                                contentType: "text/json",
                                dataType: "jsonp",
                                success: function (data) { // },
                                error: function (xhr, status, error) { }
                          });

score 0 · Accepted Answer · answered Jun 08 '17 at 05:51

I finally found something that worked for me, in this article.

I added the following to the Web.config file of my Web API, in the <syetm.webServer> section

<httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="*" />
    <add name="Access-Control-Allow-Headers" value="Content-Type" />
    <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
  </customHeaders>
</httpProtocol>

Here is the Ajax call I use to make the request:

$.ajax({
        url: url,
        data: data,
        type: 'GET',
        async: false,
        success: function(result) {
            onSuccessCallback(result);
        },
        error: function(xhr, status, error) {
            onErrorCallback(xhr, status, error);
        }
    });

How to consume Web API without server side code, using only Ajax

2 Answers2