ASP.NET Web API/React SPA - reactjs

Question

I have followed exactly (multiple times) the .NET tutorial on creating a Weather Forecast API/SPA pair and the two are not able to communicate. Here is the error, which is reported in the console log of the React SPA:
Failed to load resource: the server responded with a status of 504
(Gateway Timeout) :3000/weatherforecast:1
I do not fully understand proxies but my understanding is that if the ports match, the process of sending data from the API to the SPA should work. Here are my current settings with respect to ports:
launchSettings.JSON (API)
{
"$schema": "https://json.schemastore.org/launchsettings.json",
"iisSettings": {
"windowsAuthentication": false,
"anonymousAuthentication": true,
"iisExpress": {
"applicationUrl": "http://localhost:8772",
"sslPort": 44311
}
},
"profiles": {
"API": {
"commandName": "Project",
"launchBrowser": true,
"launchUrl": "swagger",
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Development"
},
"applicationUrl": "https://localhost:7036;http://localhost:5036",
"dotnetRunMessages": true
},
"IIS Express": {
"commandName": "IISExpress",
"launchBrowser": true,
"launchUrl": "swagger",
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Development"
}
}
}
}
setupProxy.js (React SPA)
const { createProxyMiddleware } = require('http-proxy-middleware');
const context = [
"/weatherforecast",
];
module.exports = function (app) {
const appProxy = createProxyMiddleware(context, {
target: 'https://localhost:8772',
secure: false
});
app.use(appProxy);
};
My understanding is that these two applications should be able to communicate because they have a common port of 8772, but I suppose my assumption must be wrong? Thanks for your support.