title: How we can use ASP.NET Core Web API with JS fetch?
body: <p>I'm trying to create a simple authorization form. Currently I'm using JS fetch to send POST request to the server, but as response I get nothing, but sometimes it works (can't explain why).</p>
  <p>If I use Postman, I can get response from the server, but if I use JS fetch, the server throws this strange exception (can't google it):</p>
  <blockquote>
  <p>fail: Microsoft.AspNetCore.Server.Kestrel[13]<br />
  Connection id &quot;0HM4R02V04GJV&quot;, Request id &quot;0HM4R02V04GJV:00000003&quot;: An unhandled exception was thrown by the application.<br />
  System.IO.IOException: The client reset the request stream.</p>
  <p>at Microsoft.AspNetCore.Server.Kestrel.Core.Internal.Http.HttpRequestStream.ReadAsyncInternal(Memory<code>1 destination, CancellationToken cancellationToken)   at Microsoft.AspNetCore.WebUtilities.FileBufferingReadStream.ReadAsync(Byte[] buffer, Int32 offset, Int32 count, CancellationToken cancellationToken)   at Microsoft.AspNetCore.WebUtilities.StreamHelperExtensions.DrainAsync(Stream stream, ArrayPool</code>1 bytePool, Nullable`1 limit, CancellationToken cancellationToken)<br />
  at Microsoft.AspNetCore.Mvc.Formatters.NewtonsoftJsonInputFormatter.ReadRequestBodyAsync(InputFormatterContext context, Encoding encoding)<br />
  at Microsoft.AspNetCore.Mvc.ModelBinding.Binders.BodyModelBinder.BindModelAsync(ModelBindingContext bindingContext)<br />
  at Microsoft.AspNetCore.Mvc.ModelBinding.ParameterBinder.BindModelAsync(ActionContext actionContext, IModelBinder modelBinder, IValueProvider valueProvider, ParameterDescriptor parameter, ModelMetadata metadata, Object value, Object container)<br />
  at Microsoft.AspNetCore.Mvc.Controllers.ControllerBinderDelegateProvider.&lt;&gt;c__DisplayClass0_0.&lt;g__Bind|0&gt;d.MoveNext()</p>
  </blockquote>
  <p><a href="https://i.stack.imgur.com/028yz.png" rel="nofollow noreferrer">Chrome console</a></p>
  <p><a href="https://i.stack.imgur.com/PZzTy.png" rel="nofollow noreferrer">Postman</a></p>
  <p>As you can see - if I try do to this action few times - it works.</p>
  <p>JS code:</p>
  <pre><code>function AuthRequest(){
  let uname = document.querySelector('#username').value;
  let pwd = document.querySelector('#pwd').value;
  
  var myHeaders = new Headers();
  myHeaders.append(&quot;Content-Type&quot;, &quot;application/json&quot;);
  
  var raw = JSON.stringify({&quot;Username&quot;:uname,&quot;Password&quot;:pwd});
  
  var requestOptions = {
      
    method: 'POST',
    headers: myHeaders,
    body: raw,
    redirect: 'follow'
  };
  
  fetch(&quot;https://localhost:5001/api/auth/login&quot;, requestOptions)
    .then(response =&gt; response.text())
    .then(result =&gt; console.log(result))
    .catch(error =&gt; console.log('error', error));}
  </code></pre>
  <p>Controller code:</p>
  <pre><code>[HttpPost(&quot;login&quot;)]
      public async Task&lt;ActionResult&lt;string&gt;&gt; Login([FromBody] LoginForm loginForm)
      {
          var user = await _db.Users.FirstOrDefaultAsync(x =&gt; x.Username == loginForm.Username);
  
          var message = user == null ? &quot;Can't find this user&quot; : $&quot;Found user {user.Username}&quot;;
  
          return message;
      }
  </code></pre>
  <p><strong>UPD:</strong></p>
  <p><a href="https://i.stack.imgur.com/OTXA3.png" rel="nofollow noreferrer">Full request data from Chrome console</a></p>
  <p>Startup.cs configuration</p>
  <pre><code>    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
      {
          if (env.IsDevelopment())
          {
              app.UseDeveloperExceptionPage();
          }
  
          app.UseHsts();
          
          app.UseRouting();
  
          app.UseAuthorization();
          
          app.UseHttpsRedirection();
          app.UseCors(options =&gt; options.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader());
  
          app.UseEndpoints(endpoints =&gt;
          {
              endpoints.MapControllers();
          });
      }
  </code></pre>