title: No Access-Control-Allow-Origin header is present on the requested resource when calling WebAPI
body: <p>I'm trying to call my WebAPI, but I'm always get the error <code>No Access-Control-Allow-Origin header is present</code></p>
  
  <p>Following the <a href="http://www.html5rocks.com/en/tutorials/cors/" rel="nofollow noreferrer">Using Cors</a> article, we have the code below, but it always falls <code>onerror</code> method</p>
  
  <pre><code>// Create the XHR object.
  function createCORSRequest(method, url) {
      var xhr = new XMLHttpRequest();
      if ("withCredentials" in xhr) {
          // XHR for Chrome/Firefox/Opera/Safari.
          xhr.open(method, url, true);
      } else if (typeof XDomainRequest != "undefined") {
          // XDomainRequest for IE.
          xhr = new XDomainRequest();
          xhr.open(method, url);
      } else {
          // CORS not supported.
          xhr = null;
      }
      return xhr;
  }
  
  // Helper method to parse the title tag from the response.
  function getTitle(text) {
      return text.match('&lt;title&gt;(.*)?&lt;/title&gt;')[1];
  }
  
  // Make the actual CORS request.
  function makeCorsRequest() {
      // All HTML5 Rocks properties support CORS.
      var url = 'http://localhost:56280/api/Meta/GetListMetas';    
      var xhr = createCORSRequest('GET', url);
      xhr.withCredentials = true;
      if (!xhr) {
          alert('CORS not supported');
          return;
      }
  
      // Response handlers.
      xhr.onload = function () {
          var text = xhr.responseText;
          var title = getTitle(text);
          alert('Response from CORS request to ' + url + ': ' + title);
      };
  
      xhr.onerror = function () {
          alert('Woops, there was an error making the request.');
      };
  
      xhr.send();
  }
  </code></pre>
  
  <p>I've tryied the <code>JSONP</code> also but without success again, falls on <code>error</code> method</p>
  
  <pre><code>    $.ajax({
          type: "GET",
          dataType: 'jsonp',
          url: "http://localhost:56280/api/Meta/GetListMetas"
      }).success(function (data) {
            alert(data)
      }).error(function (da) {
      });
  </code></pre>
  
  <p><strong>WebAPI</strong></p>
  
  <p>I made a pretty simple API to do the sample</p>
  
  <p><strong>WebApiConfig.cs</strong></p>
  
  <pre><code>public static class WebApiConfig
  {
      public static void Register(HttpConfiguration config)
      {
          // Web API configuration and services
          config.EnableCors();
  
          // Web API routes
          config.MapHttpAttributeRoutes();
  
          config.Routes.MapHttpRoute(
              name: "DefaultApi",
              routeTemplate: "api/{controller}/{id}",
              defaults: new { id = RouteParameter.Optional }
          );
      }
  }
  </code></pre>
  
  <p><strong>Controller</strong></p>
  
  <pre><code>    [EnableCors(origins: "*", headers: "*", methods: "*")]
      public class MetaController : ApiController
      {
          public string GetListMetas()        
          {
             return "1";
          }
      }
  </code></pre>
  
  <p>I've tryied serialize the return also, bu without success.</p>
  
  <p>Someone can help me ?</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>Below, I attach the request header </p>
  
  <p><a href="https://i.stack.imgur.com/Y4yUn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Y4yUn.png" alt="enter image description here"></a></p>