求助：Azure Web App部署后出现HTTP 200错误与JSON解析语法错误

Hey there, sorry you've been stuck on this for two days—let's break down what's going on here. That SyntaxError: Unexpected token < in JSON at position 0 error is super common when your frontend expects JSON but gets HTML back instead, even with a 200 status code. Let's walk through the fixes step by step:

1. Fix API Route Order in Your Express Server #

This is the most likely culprit. When deploying to Azure, your Express backend serves the Angular static files, but if your API routes are placed after the catch-all route for Angular, every API request will return the index.html file instead of JSON data. That's where the unexpected < comes from (the start of the HTML doctype).

Check your server.js or app.js file and make sure the order is:

• Serve static Angular files first
• Define all API routes next
• Catch-all route for Angular last

Here's a correct example:

const express = require('express');
const path = require('path');
const mongoose = require('mongoose');

const app = express();

// Serve Angular's static files from the dist folder
app.use(express.static(path.join(__dirname, 'dist/your-angular-app-name')));

// YOUR API ROUTES GO HERE (before the catch-all)
app.get('/api/table-data', async (req, res) => {
  try {
    const data = await YourMongooseModel.find();
    res.json(data);
  } catch (err) {
    // Send JSON error instead of letting it fall back to HTML
    res.status(500).json({ error: 'Failed to fetch data', message: err.message });
  }
});

// Catch-all route to return Angular's index.html for any non-API requests
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist/your-angular-app-name/index.html'));
});

// Connect to MongoDB (make sure to use Azure's connection string in production)
mongoose.connect(process.env.MONGODB_URI || 'mongodb://localhost/your-db-name')
  .then(() => console.log('Connected to MongoDB'))
  .catch(err => console.error('MongoDB connection error:', err));

const port = process.env.PORT || 3000;
app.listen(port, () => console.log(`Server running on port ${port}`));

2. Verify MongoDB Connection String in Azure #

Local development uses your local MongoDB instance, but on Azure you need to set the correct connection string in the app's configuration:

• Go to Azure Portal > Your Web App > Configuration > Application Settings
• Add a new setting with key MONGODB_URI and your production MongoDB connection string (e.g., from Azure Cosmos DB or a third-party service)
• Ensure your backend uses this environment variable instead of hardcoding the local connection string (like in the example above)

If the connection fails, your backend might return an HTML error page instead of JSON—adding try/catch blocks to your API routes (as shown) will ensure you get a JSON error response instead.

3. Check Node.js Version Compatibility #

Angular 5 has compatibility limits with newer Node.js versions. Make sure Azure is using the same Node.js version as your local environment:

• Run node -v locally to get your version
• In Azure Portal > Your Web App > Configuration > General Settings > Stack Settings, set the Node.js version to match

4. Inspect the Response in Browser DevTools #

You already mentioned using DevTools—here's what to look for:

• Open the Network tab, find the API request that's failing
• Click on it and go to the Response tab—you'll see the actual HTML being returned (likely Angular's index.html or an Azure error page)
• This will confirm exactly why the JSON parse is failing (e.g., if it's index.html, you know the route order is wrong)

5. Confirm Dist Folder Deployment #

Double-check that:

• You ran ng build --prod (or ng build for older Angular CLI versions) to generate the production-ready dist folder
• You uploaded the contents of the dist folder to Azure's site/wwwroot directory (not the dist folder itself—Azure needs the static files directly in wwwroot)

Once you fix the route ordering or connection string issue, that parse error should disappear, and your table will load the data correctly. Let me know if any of these steps don't work or if you need help digging deeper!

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