本地正常的React CosmosDB应用部署至Azure后后端请求异常求助

Hey there! I totally get how frustrating it is when everything works locally but breaks after deploying to Azure—especially when you’re following an official tutorial step by step. Let’s walk through the most common fixes for this exact scenario:

1. Fix the Proxy Configuration (Dev vs Production) #

The proxy field you might have in your React package.json only works for local development with npm start. Once you run npm run build, this setting gets ignored entirely. Here’s what to do:

• Option 1: Update your frontend API calls to use the full URL of your Azure Express backend (e.g., https://your-backend-app.azurewebsites.net/api/todos) instead of relative paths like /api/todos.
• Option 2: If you’re using Azure Static Web Apps, add a staticwebapp.config.json file to your frontend root with routing rules to proxy API requests:

{
  "routes": [
    {
      "route": "/api/*",
      "backend": {
        "url": "https://your-backend-app.azurewebsites.net"
      }
    }
  ]
}

2. Verify Backend Deployment & Port Settings #

Let’s make sure your Express backend is actually ready to accept requests on Azure:

• Head to the Azure Portal and check your backend App Service’s Overview tab—confirm it’s running without restart errors.
• Double-check the WEBSITES_PORT application setting in your backend App Service. This needs to match the port your Express app is listening on (e.g., 3001). Azure uses this to route incoming traffic to your app.
• Test your backend API directly with Postman or a browser to confirm it’s responding correctly (e.g., visit https://your-backend-app.azurewebsites.net/api/todos to see if it returns data).

3. Confirm Environment Variables Are Injected Correctly #

Even if your build script looks fine, it’s easy for environment variables to get lost during deployment:

• If you’re using a variable like REACT_APP_API_URL in your frontend, make sure you’ve added it as an application setting in your frontend’s Azure App Service/Static Web App. The value should be your full backend API URL.
• You can double-check by opening the built index.html file in your deployed frontend (use the Azure Portal’s Advanced Tools > Kudu to access files) and searching for your API URL—confirm it’s present and correct.

4. Check CORS Configuration #

If your frontend and backend are on different Azure domains, CORS might be blocking the request:

• In your Express app, ensure you’re using the cors middleware and setting the origin to your frontend’s Azure URL (you can temporarily set it to * for testing, but don’t leave that in production).
• Also, check the CORS section in your backend App Service’s Azure Portal settings—make sure you’ve added your frontend’s URL to the allowed origins list.

From your error screenshot, it looks like a POST request to /api/todos is returning 404, which means the path isn’t resolving to your backend on Azure. Start by confirming your frontend is sending requests to the correct full URL, then work through the steps above.

内容的提问来源于stack exchange，提问作者Mark