title: HTTP CORS requests with credentials are failing using Axios
body: <p>I have a legacy webforms asp.net website and a new asp.net core site sharing an auth cookie. When I try to make a CORS HTTP request from <code>Typescript</code> (in the core site) to a Web Service method (in the legacy site) using <code>Axios</code> it fails <em>unless</em> I pass an empty data object. For example:</p>
  
  <p>This request will <strong>fail</strong>:</p>
  
  <pre><code>    const url: string = "http://legacy.mydev.machine:1259/MyService.asmx/GetInformation";
      const optionsThatWontWork: AxiosRequestConfig = {
          withCredentials: true
      };
      axios.get(url, optionsThatWontWork)
          .then((response) =&gt; { console.log(response); })
          .catch((error) =&gt; { console.log(error); });
  </code></pre>
  
  <p>The browser does 1 HTTP GET (no pre-flight) request that returns an HTTP 500 with the following message in the response </p>
  
  <blockquote>
    <p>"Request format is unrecognized for URL unexpectedly ending in '/GetInformation'."</p>
  </blockquote>
  
  <p>But this <strong>works</strong>:</p>
  
  <pre><code>    const url: string = "http://legacy.mydev.machine:1259/MyService.asmx/GetInformation";
      const optionsThatWillWork: AxiosRequestConfig = {
          withCredentials: true,
          data: {
              // Adding this empty data object makes a difference
          }
      };
      axios.get(url, optionsThatWillWork)
          .then((response) =&gt; { console.log(response); })
          .catch((error) =&gt; { console.log(error); });
  </code></pre>
  
  <p>In this case the browser makes 2 requests. The first is an HTTP OPTIONS request that return with a 200 then the second is a GET that successfully hits the <code>GetInformation</code> endpoint and returns a 200 with the json data.</p>
  
  <p>When comparing the 2 HTTP GET messages the only difference that I can see is that the successful one has a <code>Content-Type: application/json;charset=utf-8</code> header.</p>
  
  <p>I tried adding in that header manually but that didn't work either:</p>
  
  <pre><code>    const optionsThatStillWontWork: AxiosRequestConfig = {
          withCredentials: true,
          headers: {
              "Content-Type": "application/json;charset=utf-8"
          },
      };
  </code></pre>
  
  <p>I have configured CORS in the legacy site's <code>Owin</code> pipeline using <code>Microsoft.Owin.Cors</code>:</p>
  
  <pre><code>Private Sub ConfigureCors(ByVal app As IAppBuilder)
      Dim corsPolicy = New CorsPolicy() With {
          .AllowAnyMethod = True,
          .AllowAnyHeader = True,
          .SupportsCredentials = True,
          .AllowAnyOrigin = False
      }
  
      corsPolicy.Origins.Add("http://newsite.mydev.machine:9050")
  
      Dim corsPolicyProvider = New CorsPolicyProvider With {
          .PolicyResolver = Function(context) Task.FromResult(corsPolicy)
      }
  
      Dim options = New CorsOptions With {
          .PolicyProvider = corsPolicyProvider
      }
  
      app.UseCors(options)
  End Sub
  </code></pre>
  
  <p><em>Note: both <code>http://legacy.mydev.machine:1259</code> and <code>http://newsite.mydev.machine:1259</code> have entries in my hosts file pointing to <code>127.0.0.1</code>.</em></p>
  
  <p>According to <a href="https://github.com/axios/axios" rel="nofollow noreferrer">the axios documentation</a> the <code>data</code> config option is </p>
  
  <blockquote>
    <p>"Only applicable for request methods 'PUT', 'POST', and 'PATCH'"</p>
  </blockquote>
  
  <p>... which I would agree with.</p>
  
  <p>Couple of questions then:</p>
  
  <ol>
  <li>Why does adding the empty <code>data</code> object make this work?</li>
  <li>Why does the first example not do a pre-flight?</li>
  <li>Does my CORS setup in the legacy site look ok?</li>
  </ol>