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#.
Table of Content
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:
- .NET SDK 8+
- Node.js 18+
- VS Code
- Basic understanding of React and C#
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
- Start your backend:
dotnet run
- Start frontend:
npm run dev
- 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 request | Check if React port is whitelisted in .WithOrigins() |
HTTPS not working in React | Use "HTTPS=true" in .env or use http://localhost:5000 |
Self-signed cert issues | Open localhost once in browser to trust dev cert |
Mixed content | Make 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.