React + .NET 8 Core API Integration (with CORS Fix) – Full Step-by-Step Guide


Learn how to integrate a modern React frontend with a .NET 8 Core Web API backend — complete with CORS configuration, data fetching, and testing. Perfect for full-stack developers working with JavaScript and C#.


1. Project Overview

We’ll build a basic full-stack app where the React frontend fetches data from a .NET 8 Web API. You’ll learn how to:

  • Build both frontend and backend from scratch
  • Handle CORS issues properly
  • Test the full integration locally

2. Prerequisites

Make sure you have the following:


3. Step 1 – Create .NET 8 Core API

dotnet new webapi -n MyDotnetApi
cd MyDotnetApi

Open the project in VS Code and run:

dotnet run

You’ll see something like:
Now listening on: https://localhost:5001

Check /WeatherForecast endpoint — it’s pre-configured and returns sample data.


4. Step 2 – Enable & Configure CORS in .NET 8

Open Program.cs and update like this:

var builder = WebApplication.CreateBuilder(args);

// Allow CORS from React dev server
builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowReactApp",
        builder => builder
            .WithOrigins("http://localhost:5173") // Vite
            .AllowAnyMethod()
            .AllowAnyHeader());
});

builder.Services.AddControllers();

var app = builder.Build();

// Use CORS policy
app.UseCors("AllowReactApp");

app.MapControllers();
app.Run();

🔁 If using CRA (Create React App) instead of Vite, change port to http://localhost:3000


5. Step 3 – Create React Frontend

npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
npm install axios
npm run dev

React will run on: http://localhost:5173


🔗 6. Step 4 – Connect React to .NET API

In App.jsx, fetch from the API:

import { useEffect, useState } from 'react';
import axios from 'axios';

function App() {
  const [weather, setWeather] = useState([]);

  useEffect(() => {
    axios.get("https://localhost:5001/weatherforecast")
      .then(res => setWeather(res.data))
      .catch(err => console.error("API Error:", err));
  }, []);

  return (
    <div>
      <h1>Weather Forecast</h1>
      <ul>
        {weather.map((item, index) => (
          <li key={index}>{item.date}: {item.temperatureC}°C - {item.summary}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

7. Step 5 – Test the Integration

  1. Start your backend: dotnet run
  2. Start frontend: npm run dev
  3. Visit http://localhost:5173

If everything is set up correctly, you’ll see weather forecast data pulled from the .NET API.


8. Bonus – Recommended Folder Structure

/my-react-app
  /src
    /api
      weather.js       <- Axios calls
    /components
      WeatherList.jsx

weather.js example:

import axios from "axios";
export const getWeather = () => axios.get("https://localhost:5001/weatherforecast");

9. Common Errors & Fixes

❌ Error✅ Fix
CORS Policy blocked requestCheck if React port is whitelisted in .WithOrigins()
HTTPS not working in ReactUse "HTTPS=true" in .env or use http://localhost:5000
Self-signed cert issuesOpen localhost once in browser to trust dev cert
Mixed contentMake sure React is using https:// if API is HTTPS

10. Final Thoughts

Combining React with ASP.NET Core (.NET 8) gives you a powerful full-stack setup — modern, fast, and scalable. The key challenge is CORS, but once configured, both apps work beautifully together.

Previous Article

How to Talk to Your Family About Online Safety

Next Article

Building Your First AI Model: A Step-by-Step Tutorial (with Python & Scikit-Learn)

Subscribe to our Newsletter

Subscribe to our email newsletter to get the latest posts delivered right to your email.
Pure inspiration, zero spam ✨
Table of Content