React fetch works in one app, "Failed to Fetch" in another

I've got a boiler-plate Visual Studio React JS app. The one that comes from the VS wizard and gives you the ASP.NET "Weather Forecast" Controller. Naturally the client React JS app's call to fetch works just fine with no issues.

I also have a completely separate, functional standalone React JS app that I want to adapt to call this server. So I took my little fetch call from the MS-generated app and copied it into the standalone app

fetch("https://localhost:44439/weatherforecast");

Then I debugged the standalone app in Visual Studio Code.

The fetch does reach my MS generated "Weather Forecast" controller, just as it does with the MS-generated app. And my controller returns the same canned data, just as it does with the other app.

But then in my standalone app, I get an error

Unhandled Runtime Error
TypeError: Failed to fetch

Why would the exact same call work in one app and not in another when it actually reaches the server? And how do I diagnose what's going wrong? This isn't a very helpful error message.

The error message "TypeError: Failed to fetch" typically indicates that the fetch request made by your standalone React app encountered an issue while trying to fetch data from the server. Since the request is reaching the server and the server is responding with the correct data for your "Weather Forecast" controller, the issue is likely related to the client-side code in your standalone React app.

Here are some common reasons why the fetch call might work in one app and not in another:

1. CORS (Cross-Origin Resource Sharing) Issue: CORS restrictions may prevent the standalone app from accessing data from the server. Browsers enforce CORS to prevent cross-origin requests that could be malicious. The MS-generated app and the standalone app might have different configurations for CORS. Ensure that your server allows requests from the domain or origin where your standalone app is hosted.

2. HTTPS Issue: Browsers enforce stricter security policies for requests made from a page served over HTTPS to a page served over HTTP. Make sure that both your client app and server are either using HTTPS or HTTP. If your standalone app is served over HTTPS and your server is served over HTTP, the fetch might fail due to mixed content restrictions.

3. Firewall or Proxy Settings: The network environment where the standalone app is being executed might have firewall or proxy settings that are blocking the request.

To diagnose the issue and get more information about the error, you can take the following steps:

1. Check the Network Tab: Open the browser's Developer Tools (usually accessible via F12), go to the "Network" tab, and make the fetch request again from your standalone app. Check if there are any errors or additional information about the failed request in the "Network" tab.

2. Catch Fetch Errors: When making the fetch call, you can add a .catch() block to catch any errors and log them to the console. This way, you might get more information about what's going wrong.

fetch("https://localhost:44439/weatherforecast")
  .then(response => response.json())
  .then(data => {
    // Handle the data
  })
  .catch(error => console.error('Fetch error:', error));

3. Inspect the Server Response: Ensure that the response from the server is in the expected format and is not throwing any unexpected errors. For example, if the response is not in valid JSON format, the response.json() method will fail.

4. Review Server-side Logs: Check the server-side logs for any potential errors or warnings related to the incoming requests.

5. Review Server-side CORS Configuration: Review the CORS configuration on the server-side and ensure that it allows requests from the standalone app's domain or origin.

By following these steps, you should be able to gather more information about what might be causing the issue with the fetch call in your standalone React app.