title: blocked by CORS policy: Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response
body: <p>I have a web site 1 and a Web API 2
  My Web API have a method name</p>
  
  <pre><code> public string Index()
          {
              return "Hello world from site 2";
          } 
  </code></pre>
  
  <p>In the controller Values.
  I call from the web site 1 my API like that</p>
  
  <pre><code>$.ajax({
              url: relativeUrl,
              headers: { "Authorization": "Bearer " + accessToken },
              type: "GET"
          })
              .done(function (result) {
                  console.log("Result: " + result);
                  alert(result);
              })
              .fail(function (result) {
                  console.log("Error: " + result.statusText);
                  alert(result.statusText);
              });
  </code></pre>
  
  <p>But I have the following error in my js console.</p>
  
  <blockquote>
    <p>Access to XMLHttpRequest at ‘Web API 2' from origin ‘Web site 1’ has
    been blocked by CORS policy: Request header field authorization is not
    allowed by Access-Control-Allow-Headers in preflight response.</p>
  </blockquote>
  
  <p>I add in my controller :</p>
  
  <pre><code>[EnableCors(origins: "*", headers: "*", methods: "*", exposedHeaders: "X-Custom-Header")]
  </code></pre>
  
  <p>In my WebAPIConfig.cs</p>
  
  <pre><code>config.EnableCors();
  </code></pre>
  
  <p>And in my Web.config</p>
  
  <pre><code>&lt;httpProtocol&gt;
    &lt;customHeaders&gt;
      &lt;add name="Access-Control-Allow-Origin" value="*" /&gt;
      &lt;add name="Access-Control-Allow-Headers" value="Content-Type" /&gt;
      &lt;add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" /&gt;
    &lt;/customHeaders&gt;
  &lt;/httpProtocol&gt;
  </code></pre>
  
  <p>But even with that I have still the error, I don't understand what I need to add and where.</p>