title: Enable CORS in Angular 6 and ASP.net
body: <p>I am trying to send a POST request from my Angular 6 App to an API that sends Emails.</p>
  
  <p>I tested the request with postman and it worked, however when I'm doing the POST request in my Angular app I get errors in my console.</p>
  
  <p>My function in the Angular app:</p>
  
  <pre><code>sendMail(formBody: string): any {
      //let url = this.config.origin + "/api/SendEmail";
      let url = "http://localhost:49561/api/SendEmail";
      let headers = new HttpHeaders();
      headers = headers.append('Content-Type', 'application/json');
  
      return this.httpClient.post(url, formBody, { headers })
        .pipe(map(res =&gt; {
          return res;
        })).toPromise();
    }
  </code></pre>
  
  <p>I have added the following to my API:</p>
  
  <pre><code> public static class WebApiConfig
      {
          public static void Register(HttpConfiguration config)
          {
              // Enable Cors
              config.EnableCors();
              ...
  </code></pre>
  
  <pre><code>    [EnableCors(origins: "http://localhost:4200/contact", headers: "*", methods: "*")]
      public class ContactFormsController : ApiController
      {
         ...
  </code></pre>
  
  <p>These are the warnings and errors I'm getting in the Console:</p>
  
  <blockquote>
    <p>"Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at <a href="http://localhost:49561/api/SendEmail" rel="nofollow noreferrer">http://localhost:49561/api/SendEmail</a>. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing)."</p>
    
    <p>"Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at <a href="http://localhost:49561/api/SendEmail" rel="nofollow noreferrer">http://localhost:49561/api/SendEmail</a>. (Reason: CORS request did not succeed)."</p>
    
    <p>"ERROR Error: "Uncaught (in promise): HttpErrorResponse: {"headers":{"normalizedNames":{},"lazyUpdate":null,"headers":{}},"status":0,"statusText":"Unknown Error","url":null,"ok":false,"name":"HttpErrorResponse","message":"Http failure response for (unknown url): 0 Unknown Error","error":{"isTrusted":true}}""</p>
  </blockquote>
  
  <p>EDIT:
  I have added the following in Web.config:</p>
  
  <pre><code>         &lt;httpProtocol&gt;
                  &lt;customHeaders&gt;
                  &lt;add name="Access-Control-Allow-Origin" value="*" /&gt;
                  &lt;/customHeaders&gt;
           &lt;/httpProtocol&gt;
  </code></pre>
  
  <p>and now I'm getting this Error instead of "‘Access-Control-Allow-Origin’ missing":</p>
  
  <blockquote>
    <p>Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at <a href="http://localhost:49561/api/SendEmail" rel="nofollow noreferrer">http://localhost:49561/api/SendEmail</a>. (Reason: CORS preflight channel did not succeed)</p>
  </blockquote>
  
  <p>EDIT:</p>
  
  <p>After removing "content-type : application/json". I got this Error in the console:</p>
  
  <blockquote>
    <p>ERROR Error: "Uncaught (in promise): HttpErrorResponse: {"headers":{"normalizedNames":{},"lazyUpdate":null},"status":500,"statusText":"Internal Server Error","url":"<a href="http://localhost:49561/api/SendEmail" rel="nofollow noreferrer">http://localhost:49561/api/SendEmail</a>","ok":false,"name":"HttpErrorResponse","message":"Http failure response for <a href="http://localhost:49561/api/SendEmail" rel="nofollow noreferrer">http://localhost:49561/api/SendEmail</a>: 500 Internal Server Error","error":{"Message":"An error has occurred.","ExceptionMessage":"The specified policy origin '<a href="http://localhost:4200/contact" rel="nofollow noreferrer">http://localhost:4200/contact</a>' is invalid. It must not contain a path, query, or fragment.","ExceptionType":"System.InvalidOperationException","StackTrace":"   at System.Web.Http.Cors.EnableCorsAttribute.ValidateOrigins(IList`1 origins)\r\n   at System.Web.Http.Cors.EnableCorsAttribute.GetCorsPolicyAsync(HttpRequestMessage request, CancellationToken cancellationToken)\r\n   at System.Web.Http.Cors.CorsMessageHandler.d__8.MoveNext()\r\n--- End of stack trace from previous location where exception was thrown ---\r\n   at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)\r\n   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)\r\n   at System.Web.Http.Cors.CorsMessageHandler.d__5.MoveNext()\r\n--- End of stack trace from previous location where exception was thrown ---\r\n   at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)\r\n   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)\r\n   at System.Web.Http.Cors.CorsMessageHandler.d__4.MoveNext()"}}"</p>
  </blockquote>