Angular子域名经Nginx映射子目录后JS资源加载404问题求解

Hi Adam, let's work through your problem step by step—this is a common issue with reverse proxies + Angular apps, and it's fixable with a mix of Angular build tweaks and Nginx configuration adjustments.

What's Causing the 404 Errors? #

The core issue is a mismatch between:

1. Angular's resource path generation: By default, Angular builds assets with root-relative paths (like /main.js) assuming the app lives at the domain root.
2. Nginx's reverse proxy routing: You're mapping sub.example.com to example.com/sub, but if your proxy config isn't handling path appending correctly, requests for /main.js from sub.example.com get forwarded to the wrong location on example.com.

Solution: Fix Both Angular Build and Nginx Config #

You'll need to adjust both pieces to make this work seamlessly:

1. Adjust Angular Build Command

First, tell Angular that its "root" path is /sub/ (since that's where it lives on example.com). Update your build command to include the --base-href flag:

ng build --base-href /sub/

This ensures all assets, scripts, and routes are generated with paths relative to /sub/ (e.g., /sub/main.js instead of /main.js), which aligns with where the app is hosted on example.com.

2. Fix Nginx Reverse Proxy Configuration

Your proxy_pass setup likely has a small but critical issue: missing a trailing slash. Here's the corrected config for sub.example.com:

server {
    server_name sub.example.com;

    location / {
        # The trailing slash at the end is essential!
        # It tells Nginx to append the requested URI to `/sub/`
        proxy_pass http://example.com/sub/;

        # Add these headers to ensure the backend (example.com) handles the request correctly
        proxy_set_header Host example.com;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

• Without the trailing slash on proxy_pass http://example.com/sub/, Nginx would incorrectly concatenate paths (e.g., a request for /main.js would become http://example.com/submain.js instead of http://example.com/sub/main.js), leading to 404s.
• The additional headers ensure example.com recognizes the request as coming from the proxy and serves the correct content.

3. Ensure example.com Nginx Config Handles Angular Routes

If your Angular app uses HTML5 routing (the default for modern Angular apps), you need to make sure example.com's Nginx config falls back to index.html for all routes under /sub:

server {
    server_name example.com;

    location /sub {
        # Path to your Angular app's built files (dist folder)
        root /var/www/your-angular-app/dist;
        # Serve existing files, or fallback to index.html for Angular routes
        try_files $uri $uri/ /sub/index.html;
    }
}

This prevents 404 errors when users navigate directly to routes like sub.example.com/dashboard (which maps to example.com/sub/dashboard).

Is This an Angular or Nginx Problem? #

It's a combination of both:

• Angular needs to know its correct base path to generate valid asset URLs.
• Nginx needs to properly forward requests from sub.example.com to example.com/sub without mangling paths.

Final Check #

After updating both the build command and Nginx configs:

1. Rebuild your Angular app with the new --base-href flag.
2. Restart Nginx to apply the config changes.
3. Test accessing sub.example.com—your assets should load correctly, and Angular routes should work as expected.

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