移除URL哈希标签后AngularJS页面刷新出现404异常问题

Ah, this is such a common gotcha when switching AngularJS to clean HTML5 URLs—let’s break down how to fix this step by step. The core issue here is that when you refresh a page like /profile, your browser sends a direct request to the server for that path... but the server doesn’t have a physical /profile file or directory, so it throws a 404. We need to configure both your AngularJS app and Apache (via .htaccess) to handle this correctly.

Step 1: Double-Check Your AngularJS Setup #

First, make sure you’ve fully configured HTML5 mode in your myapp.js and added the required base tag in index.html:

In myapp.js: #

You need to enable html5Mode and ensure the base URL requirement is set (it’s enabled by default, so we just need to explicitly define it):

angular.module('myapp', [])
  .config(function($locationProvider) {
    $locationProvider.html5Mode({
      enabled: true,
      requireBase: true
    });
  });

In index.html: #

Add a <base> tag inside the <head> section—this tells AngularJS how to resolve relative URLs when using HTML5 mode. If your app lives at the root of your domain, use:

<head>
  <base href="/">
  <!-- Rest of your head content (styles, scripts, etc.) -->
</head>

If your app is hosted in a subdirectory (e.g., https://yourdomain.com/my-app/), update the base href to match:

<base href="/my-app/">

Step 2: Configure .htaccess to Rewrite Requests to index.html #

Now we need to tell Apache to redirect all non-existent paths to index.html, so AngularJS can take over routing. Create or update your .htaccess file in your project root with these rules:

# Enable Apache's rewrite engine
RewriteEngine On

# Skip rewriting for actual files/directories/symlinks
# This ensures static assets (CSS, JS, images) still load correctly
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d [OR]
RewriteCond %{REQUEST_FILENAME} -l
RewriteRule ^ - [L]

# Redirect all other requests to index.html
RewriteRule ^ index.html [L]

For Apps in a Subdirectory: #

If your app lives in a subfolder, add a RewriteBase line to specify the subdirectory path:

RewriteEngine On
RewriteBase /my-app/

RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d [OR]
RewriteCond %{REQUEST_FILENAME} -l
RewriteRule ^ - [L]

RewriteRule ^ index.html [L]

Why This Works #

• The first set of RewriteCond rules checks if the requested path points to an actual file, directory, or symlink. If it does, Apache serves it directly (so your static assets don’t break).
• The final RewriteRule sends every other request to index.html, where AngularJS’s routing system will parse the URL and load the correct view.

Quick Pre-Flight Check #

Make sure Apache’s mod_rewrite module is enabled—most hosting providers have this turned on by default, but if you’re running locally (e.g., XAMPP/WAMP), you may need to enable it manually in your Apache config file.

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