How to call SharePoint 2013 REST API from HTML page

Question

I can get the SharePoint 2013 list/libraries information using REST API, this is working fine from a SharePoint App. If I want to retrieve the same information from a HTML page, I am getting error "The request was aborted or timed out." I think the issue would be that it will not have authenticated to interact with SharePoint.

Can anybody help me how to make this working from a HTML page?

 // Load the required SharePoint libraries
$(document).ready(function () {
    //Get the URI decoded URLs.
    hostweburl =
        decodeURIComponent(
            getQueryStringParameter("SPHostUrl")
    );
    appweburl =
        decodeURIComponent(
            getQueryStringParameter("SPAppWebUrl")
    );


// resources are in URLs in the form:
// web_url/_layouts/15/resource
var scriptbase = hostweburl + "/_layouts/15/";

// Load the js files and continue to the successHandler
$.getScript(scriptbase + "SP.RequestExecutor.js", execCrossDomainRequest);


});

// Function to prepare and issue the request to get
//  SharePoint data
function execCrossDomainRequest() {
    // executor: The RequestExecutor object
    // Initialize the RequestExecutor with the app web URL.
    var executor = new SP.RequestExecutor(appweburl);

// Issue the call against the app web.
// To get the title using REST we can hit the endpoint:
//      appweburl/_api/web/lists/getbytitle('listname')/items
// The response formats the data in the JSON format.
// The functions successHandler and errorHandler attend the
//      sucess and error events respectively.
executor.executeAsync(
    {
        url:
            appweburl +
            "/_api/web/lists/getbytitle('Announcements')/items",
        method: "GET",
        headers: { "Accept": "application/json; odata=verbose" },
        success: successHandler,
        error: errorHandler
    }
);

}

Answer 1

A Web page will run within the context of the browser it is loaded within. For security reasons, the browser will create a "sandboxed" environment which will prevent cross-site calls unless the remote server allows them. You will need to ensure that the server you are calling allows cross-origin (a.k.a. CORS) requests.

When you run a full-blown application, you are not typically bound by the same sandbox model since security is managed by the application container (e.g., the operating system or application server).