title: WebApi CORs - Access-Control-Allow-Origin header is present on request error
body: <p><strong>Question Background:</strong></p>
  
  <p>This seems to be a common issue and one I have fallen foul of.</p>
  
  <p>I have a standard WebApi currently hosted in Azure and a calling AngularJS app that calls an end point on said WebApi.</p>
  
  <p>The AngularJS app URL calling to the WebApi is:</p>
  
  <pre><code>http://siteang.azurewebsites.net
  </code></pre>
  
  <p>And the WebApi address is:</p>
  
  <pre><code>https://site.azurewebsites.net
  </code></pre>
  
  <p><strong>I want to ensure that only my app at <code>http://siteang.azurewebsites.net</code> is capable of accessing the WebApi at <code>https://site.azurewebsites.net</code></strong></p>
  
  <p><strong>The Issue:</strong></p>
  
  <p>I am receiving the following error on the submitting form of my AngularJS app to the WebApi service.</p>
  
  <pre><code>XMLHttpRequest cannot load https://site.azurewebsites.net/api/ShoppingComparison/GetC…itemIndex=Baby&amp;itemtosearch=baby&amp;lowToHigh=false&amp;maxPrice=50000&amp;minPrice=0.
  
  Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
  Origin 'http://siteang.azurewebsites.net' is therefore not allowed access. The response had HTTP status code 500.
  </code></pre>
  
  <p><strong>The Code:</strong></p>
  
  <p>The following is the $http request to the WebApi service.</p>
  
  <p>Note that the header property of the call has been set with the address of the AngularJS site.</p>
  
  <pre><code>   loadSearchList: function (itemToSearch, itemIndex, countryCode) {
          self.itemToSearch = itemToSearch;
          self.itemCatagory = itemIndex;
          self.country = countryCode;
  
          self.searchList = [];
  
          $http({
              method: 'GET',
              url: 'https://site.azurewebsites.net/api/ShoppingComparison/GetComparisons',
              params: {
                  itemtosearch: itemToSearch,
                  itemIndex: itemIndex,
                  countryCode: countryCode,
                  maxPrice: '50000',
                  minPrice: '0',
                  highToLow: true,
                  lowToHigh: false,
                  amazonEbay: true,
                  amazonOnly: false,
                  ebayOnly: false
              },
              headers: {
                  'Content-Type': 'text/plain; charset=UTF-8',
                  'Access-Control-Allow-Origin': 'http://siteang.azurewebsites.net',
                  'Access-Control-Allow-Methods': 'POST, GET, OPTIONS, PUT, DELETE'
              }
          }).success(function (data) {
  
              //Success Handler.
  
          }).error(function (data) {
  
              //Error Handler.
  
          });
  
      }
  </code></pre>
  
  <p>The following is the WebApi Controller that is being calling by the AngularJS app. Note that the header has been set to accept the <code>http://siteang.azurewebsites.net</code> site that is making the call:</p>
  
  <pre><code> [System.Web.Http.HttpGet]
      [EnableCors(origins: "http://siteang.azurewebsites.net", headers: "*", methods: "*")]
      public ViewItemModel GetComparisons([FromUri] ComparisonRequestModel comparisonModel)
      {
          return _callAndSearchApis.SearchApis(comparisonModel);
      }
  </code></pre>
  
  <p>Any help in determing why this request is being rejected by the WebApi controller will be much appreciated.</p>