title: Unable to fetch from controller - React/asp.net core Web API
body: <p>When I try to fetch data from the UserController I get returned Html for some reason. It is the <code>index.html</code> file under the React &gt; Public folder. It should be returning the Users from the UserController.</p>
  <p>I have a React frontend app which I have added ASP.NET Core Web API backend.
  <a href="https://docs.microsoft.com/en-us/visualstudio/javascript/tutorial-asp-net-core-with-react?view=vs-2022" rel="nofollow noreferrer">https://docs.microsoft.com/en-us/visualstudio/javascript/tutorial-asp-net-core-with-react?view=vs-2022</a></p>
  <p>The browser URL is <code>https://localhost:3000/</code></p>
  <p>The backend, ASP.NET Core Web API, App URL is (found under Properties &gt; Debug) <code>https://localhost:7015;http://localhost:5015</code></p>
  <p><strong>This is what is returned</strong></p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
    &lt;head&gt;
      &lt;meta charset=&quot;utf-8&quot; /&gt;
      &lt;link rel=&quot;icon&quot; href=&quot;/favicon.ico&quot; /&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot; /&gt;
      &lt;meta name=&quot;theme-color&quot; content=&quot;#000000&quot; /&gt;
      &lt;meta
        name=&quot;description&quot;
        content=&quot;Web site created using create-react-app&quot;
      /&gt;
      &lt;link rel=&quot;apple-touch-icon&quot; href=&quot;/logo192.png&quot; /&gt;
      &lt;!--
        manifest.json provides metadata used when your web app is installed on a
        user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
      --&gt;
      &lt;link rel=&quot;manifest&quot; href=&quot;/manifest.json&quot; /&gt;
      &lt;!--
        Notice the use of  in the tags above.
        It will be replaced with the URL of the `public` folder during the build.
        Only files inside the `public` folder can be referenced from the HTML.
  
        Unlike &quot;/favicon.ico&quot; or &quot;favicon.ico&quot;, &quot;/favicon.ico&quot; will
        work correctly both with client-side routing and a non-root public URL.
        Learn how to configure a non-root public URL by running `npm run build`.
      --&gt;
      &lt;title&gt;React App&lt;/title&gt;
    &lt;script defer src=&quot;/static/js/bundle.js&quot;&gt;&lt;/script&gt;&lt;/head&gt;
    &lt;body&gt;
      &lt;noscript&gt;You need to enable JavaScript to run this app.&lt;/noscript&gt;
      &lt;div id=&quot;root&quot;&gt;&lt;/div&gt;
      &lt;!--
        This HTML file is a template.
        If you open it directly in the browser, you will see an empty page.
  
        You can add webfonts, meta tags, or analytics to this file.
        The build step will place the bundled scripts into the &lt;body&gt; tag.
  
        To begin the development, run `npm start` or `yarn start`.
        To create a production bundle, use `npm run build` or `yarn build`.
      --&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p><strong>My fetch code</strong> - I am returning .text() instead of .json() because obviously it results in an error because json is not returned but html.</p>
  <pre><code>    useEffect(() =&gt; {
  
          const fetchUsers = async () =&gt; {
  
              const result = await fetch('https://localhost:3000/api/user');
              const usersText = await result.text();
              console.log(usersText)
          }
  
          fetchUsers();
      }, [])
  </code></pre>
  <p>If I return .json() instead of .text() I get the following error, because obviously html is returned.</p>
  <pre><code>Uncaught (in promise) SyntaxError: Unexpected token &lt; in JSON at position 0
  </code></pre>
  <p><strong>UserController.cs</strong></p>
  <pre><code>using Microsoft.AspNetCore.Mvc;
  
  namespace ASPNETCore_Backend.Controllers
  {
      [Route(&quot;api/[controller]&quot;)]
      [ApiController]
      public class UserController : ControllerBase
      {
          [HttpGet]
          public ActionResult&lt;IEnumerable&lt;User&gt;&gt; List()
          {
              // in real life - retrieve from database
              var users = new List&lt;User&gt;{
                  new User {
                      Id = 1,
                      Name = &quot;Jon Hilton&quot;,
                      Summary = &quot;36 / Lead Software Developer&quot; }
              };
  
              return Ok(users);
          }
      }
  
      public class User
      {
          public int Id { get; set; }
          public string Name { get; set; }
          public string Summary { get; set; }
      }
  }
  </code></pre>
  <hr />
  <p><strong>Update</strong> - I have added AddCors() to <code>Program.cs</code></p>
  <pre><code>builder.Services.AddCors(options =&gt;
  {
      options.AddPolicy(&quot;CORSPolicy&quot;, 
          builder =&gt;
          {
              builder
              .AllowAnyMethod()
              .AllowAnyHeader()
              .WithOrigins(&quot;https://localhost:3000&quot;);
          });
  });
  </code></pre>
  <pre><code>code above...
  app.UseHttpsRedirection();
  app.UseCors(&quot;CORSPolicy&quot;); // Added
  app.UseStaticFiles();
  code below...
  </code></pre>
  <p><strong>and updated the fetch code to</strong></p>
  <pre><code>const result = await fetch('https://localhost:7015/api/user');
  </code></pre>
  <p>but no luck, still get an error, though at least it doesn't return the Html file.</p>
  <p><code>GET https://localhost:7015/api/user 404</code></p>