title: No 'Access-Control-Allow-Origin' header
body: <p>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. </p>
  
  <p>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...</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;script type="text/javascript"&gt;
      var hostweburl;
  
      // Load the required SharePoint libraries.
      $(document).ready(function () {
  
          // Get the URI decoded URLs.
          hostweburl =
              decodeURIComponent(
                  getQueryStringParameter("SPHostUrl")
          );
  
          // 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 =
             decodeURIComponent(
                 getQueryStringParameter("SPHostUrl")
         );
          retrieveWebSite(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 =
              document.URL.split("?")[1].split("&amp;");
          var strParams = "";
          for (var i = 0; i &lt; 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();
  
          clientContext.load(this.oWebsite);
  
          clientContext.executeQueryAsync(
              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());
      }
  
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The exception occurs in the function retrieveWebSite when it attempts to obtain the Client Context for the site...</p>
  
  <pre><code>        var clientContext = new SP.ClientContext(siteUrl);
  </code></pre>
  
  <p>The exception is as follows ...</p>
  
  <p>XMLHttpRequest cannot load <a href="https://mySharePointSiteName.sharepoint.com/sites/Apps/_api/contextinfo" rel="nofollow">https://mySharePointSiteName.sharepoint.com/sites/Apps/_api/contextinfo</a>. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '<a href="https://myWebSiteName.azurewebsites.net" rel="nofollow">https://myWebSiteName.azurewebsites.net</a>' is therefore not allowed access.  </p>
  
  <p>I thought the whole IFrames stuff takes care of this? </p>