No 'Access-Control-Allow-Origin' header

I have an MVC application deployed to Azure which was created as a SharePoint App Part (Provider-Hosted) for a SharePoint Online site. All Client ID and Secret ID are set correctly within SharePoint site and the Azure web Application.

The App does spin up from the SharePoint site but the JSOM logic is throwing a No 'Access-Control-Allow-Origin' header exception when it runs this simple JS logic...

<script type="text/javascript">
    var hostweburl;

    // Load the required SharePoint libraries.
    $(document).ready(function () {

        // Get the URI decoded URLs.
        hostweburl =

        // The js files are in a URL in the form:
        // web_url/_layouts/15/resource_file
        var scriptbase = hostweburl + "/_layouts/15/";

        // Load the js files and continue to
        // the execOperation function.
        $.getScript(scriptbase + "SP.Runtime.js",
            function () {
                $.getScript(scriptbase + "SP.js", execOperation);

    // Function to execute basic operations.
    function execOperation() {

        // Continue your program flow here.
        hostweburl =


    // Function to retrieve a query string value.
    // For production purposes you may want to use
    // a library to handle the query string.
    function getQueryStringParameter(paramToRetrieve) {
        var params =
        var strParams = "";
        for (var i = 0; i < params.length; i = i + 1) {
            var singleParam = params[i].split("=");
            if (singleParam[0] == paramToRetrieve)
                return singleParam[1];

    function retrieveWebSite(siteUrl) {
        var clientContext = new SP.ClientContext(siteUrl);
        this.oWebsite = clientContext.get_web();


            Function.createDelegate(this, this.onQuerySucceeded),
            Function.createDelegate(this, this.onQueryFailed)

    function onQuerySucceeded(sender, args) {
        alert('Title: ' + this.oWebsite.get_title() +
            ' Description: ' + this.oWebsite.get_description());

    function onQueryFailed(sender, args) {
        alert('Request failed. ' + args.get_message() +
            '\n' + args.get_stackTrace());


The exception occurs in the function retrieveWebSite when it attempts to obtain the Client Context for the site...

        var clientContext = new SP.ClientContext(siteUrl);

The exception is as follows ...

XMLHttpRequest cannot load No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '' is therefore not allowed access.

I thought the whole IFrames stuff takes care of this?


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.