title: Fetch Post issues with CORS not getting header
body: <p>This CORS has brought me to my knees again.  I mean it can be so discouraging.  Please understand I have been looking at all 5 million posts on this topic before you down vote me.  I realize there is a lot out there on this subject.  Here is my Fetch Post in my React UI code.  This is running on a IIS server with the compiled JS, and just Index.html for the SPA.  Im trying to call a API on the same server different port.  It's the preflight that is killing me in Chrome and other modern browsers (seems fine in IE).    </p>
  
  <p>Here is the fetch:</p>
  
  <pre><code>    return (
          fetch(mypost, {
              method: 'POST',
              headers: {
                  "Content-Type": "application/json",
                  "Access-Control-Allow-Origin": "*",
                  "Accept": "application/json",
              },
              mode: 'cors',
              body: JSON.stringify({
                  name: this.state.value,
              })
          }).then(response =&gt; {
              if (response.status &gt;= 400) {
                  this.setState({
                      value: 'no greeting - status &gt; 400'
                  });
                  throw new Error('no greeting - throw');
              }
              return response.text()
          }).then(data =&gt; {
              var myData = JSON.parse(data);
              this.setState({
                  greeting: myData.name,
                  path: myData.link
              });
          }).catch(() =&gt; {
              this.setState({
                  value: 'no greeting - cb catch'
              })
          })
      );
  </code></pre>
  
  <p>standard prefight error we've all seen. </p>
  
  <p><em>Fetch API cannot load <a href="http://myApiServer:81/values/dui/" rel="noreferrer">http://myApiServer:81/values/dui/</a>. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '<a href="http://localhost:82" rel="noreferrer">http://localhost:82</a>' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.</em></p>
  
  <p>Here is the fiddle for the preflight:</p>
  
  <pre><code>OPTIONS http://myApiServer:81/values/dui/ HTTP/1.1
  Host: myApiServer:81
  Connection: keep-alive
  Access-Control-Request-Method: POST
  Origin: http://localhost:82
  User-Agent: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36
  Access-Control-Request-Headers: access-control-allow-origin, content-type
  Accept: */*
  Referer: http://localhost:82/validator
  Accept-Encoding: gzip, deflate, sdch
  Accept-Language: en-US,en;q=0.8
  </code></pre>
  
  <p>Now I have learned that setting no-cors will basically set a default header, which is not what I want either, I need my application/json, cause who doesn't want JSON, right? :) </p>
  
  <p>I would love any advice on what I can do to resolve this issue.  Basically since this is just compiled Javascript and index.html sitting on a IIS server, I need to know the best solution for dealing with these preflight options checks that seem to be happening.    </p>
  
  <p>******Update</p>
  
  <p>I've tried adding webconfig to force the IIS server to handle the preflight.  It seems like it needs to be on both ends, my UI and API??  </p>
  
  <p>Here is my UI Web.Config</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  &lt;configuration&gt;
  &lt;system.webServer&gt;
      &lt;httpProtocol&gt;
          &lt;customHeaders&gt;
              &lt;add name="Access-Control-Allow-Origin" value="*" /&gt;
              &lt;add name="Access-Control-Allow-Methods" value="GET,PUT,POST,DELETE,OPTIONS" /&gt;
              &lt;add name="Access-Control-Allow-Headers" value="Content-Type" /&gt;
          &lt;/customHeaders&gt;
      &lt;/httpProtocol&gt;
  &lt;/system.webServer&gt;
  </code></pre>
  
  <p></p>
  
  <p>And my WebApi web.config</p>
  
  <pre><code>  &lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;configuration&gt;
  
  &lt;system.webServer&gt;
    &lt;handlers&gt;
      &lt;add name="aspNetCore" path="*" verb="*" modules="AspNetCoreModule" resourceType="Unspecified" /&gt;
    &lt;/handlers&gt;
    &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" /&gt;
      &lt;/customHeaders&gt;
    &lt;/httpProtocol&gt;
    &lt;aspNetCore processPath="dotnet" arguments=".\dui.dll" stdoutLogEnabled="false" stdoutLogFile=".\logs\stdout" forwardWindowsAuthToken="true" /&gt;
   &lt;/system.webServer&gt;
   &lt;/configuration&gt;
  </code></pre>
  
  <p>All Im getting now is:</p>
  
  <p>fetch API cannot load <a href="http://myApiServer:81/values/dui/" rel="noreferrer">http://myApiServer:81/values/dui/</a>. Response for preflight has invalid HTTP status code 415.</p>
  
  <p>Here is the fiddle for this.  </p>
  
  <p>req</p>
  
  <pre><code>OPTIONS http://myApiServer:81/values/dui/ HTTP/1.1
  Host: myApiServer:81
  Connection: keep-alive
  Access-Control-Request-Method: POST
  Origin: http://localhost:82
  User-Agent: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36
  Access-Control-Request-Headers: content-type
  Accept: */*
  Referer: http://localhost:82/validator
  Accept-Encoding: gzip, deflate, sdch
  Accept-Language: en-US,en;q=0.8
  </code></pre>
  
  <p>And response</p>
  
  <pre><code>HTTP/1.1 415 Unsupported Media Type
  Content-Length: 0
  Server: Kestrel
  X-Powered-By: ASP.NET
  Access-Control-Allow-Origin: *
  Access-Control-Allow-Headers: Content-Type
  Access-Control-Allow-Methods: GET, POST, PUT, DELETE
  Date: Thu, 02 Mar 2017 18:35:31 GMT
  </code></pre>