Angular应用部署至Vserver后出现Connection refused（状态码0）问题求助

Hey there, let's work through this connection refused issue together—this is a common gotcha when deploying frontend/backend stacks on the same server. Here are the key areas to check and fix:

1. Fix Express API's Listening Address #

First, double-check how your Express server is binding to an address. If you're using app.listen(port) without specifying a host, it defaults to localhost (127.0.0.1). That means the API only accepts requests from the server's local loopback, not from external sources (even if your Angular app is on the same server, if it's served via a separate process like Nginx, it might be treated as an external request).

Update your Express listen code to bind to all interfaces:

app.listen(yourApiPort, '0.0.0.0', () => {
  console.log(`API running on port ${yourApiPort}`);
});

2. Verify API Accessibility Locally #

Log into your VServer and test if the API responds using curl:

curl http://localhost:yourApiPort/your-endpoint-path

• If this fails: Check if the Express service is running (use ps aux | grep node), and confirm no other process is using your API port with ss -tulpn | grep yourApiPort.
• If this works: Move on to checking frontend configuration and network rules.

3. Correct Angular's API Base URL #

A super common mistake is hardcoding http://localhost:yourApiPort as this.api in your Angular app. When the app runs in a user's browser, localhost refers to their local machine—not your VServer!

Instead, set this.api to:

• Your VServer's public IP address (e.g., http://123.45.67.89:yourApiPort)
• Your domain name (e.g., http://yourdomain.com:yourApiPort)
• A relative path (e.g., /api) if you're using Nginx to reverse proxy API requests to your Express server (this is the cleanest approach for production).

4. Fix the Angular HTTP GET Request Syntax #

Looking at your code, you're passing a request body as the second argument to http.get()—but GET requests shouldn't include a request body, and this is likely causing an invalid request structure.

Update your Angular code to remove the unnecessary body parameter:

public getContent(): Observable<any> { 
  const headers = new Headers(); 
  headers.append('Content-Type', 'application/json');

  return this.http.get(this.api, { headers: headers })
    .map(response => response.json())
    .catch((e) => this.errorHandler(e, this.router)); 
}

(Note: If you're using a newer Angular version (v6+), you should use HttpHeaders instead of the deprecated Headers class.)

5. Check Firewall/Security Group Rules #

Even if your API is listening correctly, your VServer's firewall (e.g., ufw, iptables) or your cloud provider's security group might be blocking incoming traffic to your API port.

• For ufw, allow the port with: sudo ufw allow yourApiPort/tcp
• For cloud security groups (like AWS EC2 Security Groups, DigitalOcean Firewalls), add an inbound rule allowing TCP traffic to your API port from your frontend's source (or all sources for testing, then lock it down later).

6. Add CORS Support (If Needed) #

If your Angular app is served from a different origin (e.g., different port, domain) than your API, you'll need to enable CORS in Express. Install the cors middleware:

npm install cors

Then add it to your Express app:

const cors = require('cors');
app.use(cors());

(You can configure specific origins for production instead of allowing all.)

Start with these steps—most likely the issue is either the Express listening address, Angular's API URL, or the invalid GET request syntax. Let me know if you hit any snags!

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