刷新页面回环angular 404

Question

我已经创建了一个带环回和 angular 的应用程序，但我遇到了问题。当我刷新浏览器环回给我一个 404 url 未找到。

已将基本标签添加到 index.html

<base href="/"/>

正确设置 middlelware.json 以提供静态内容：

"files": {
"loopback#static": {
  "params": "$!../client"
}

在 angular 路由器中设置 HTML5 模式（我正在使用 ui-路由器）

$locationProvider.html5Mode(true);
$urlRouterProvider.otherwise('/');

我还没有从项目中删除 root.js。

我做错了什么？提前致谢

Answer 1

我认为那是因为您正在使用 $locationProvider.html5Mode(true); 。试试这个 $locationProvider.html5Mode(false);

Answer 2

当您在 angularjs 中启用 html5 模式/推送状态模式 ON 时，这是您的服务器应该处理的常见情况。如果我正确理解你的问题，当你刷新页面时服务器 returns 404 如果从登录页面导航，则渲染正常。让我知道是否是这种情况：

Angular 应用进入主屏幕，例如 your_domain/
导航到其他页面 - your_domain/somepage（这将是 your_domain/#somepage 以防万一哈希爆炸模式）
刷新页面 -> 抛出 404

如果您遇到的情况如上所示，那么会发生以下情况：

加载主页 -> angular 已 bootstrap 编辑并设置路由
导航到 "somepage" -> angular 路由处理并显示 "somepage"
刷新页面 -> 请求到达服务器并请求 your_domain/somepage - 这在服务器
服务器returns404

如何处理？如果出现 404，请 Url 从服务器重写回 your_domain/。这将 bootstrap angular 应用和 angular 路由将处理请求

此处有更多详细信息 - https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode

从上面的网站复制粘贴

Apache 重写

<VirtualHost *:80>
    ServerName my-app

    DocumentRoot /path/to/app

    <Directory /path/to/app>
        RewriteEngine on

        # Don't rewrite files or directories
        RewriteCond %{REQUEST_FILENAME} -f [OR]
        RewriteCond %{REQUEST_FILENAME} -d
        RewriteRule ^ - [L]

        # Rewrite everything else to index.html to allow html5 state links
        RewriteRule ^ index.html [L]
    </Directory>
</VirtualHost>

Nginx 重写

server {
    server_name my-app;

    root /path/to/app;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

Azure IIS 重写

<system.webServer>
  <rewrite>
    <rules> 
      <rule name="Main Rule" stopProcessing="true">
        <match url=".*" />
        <conditions logicalGrouping="MatchAll">
          <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />                                 
          <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
        </conditions>
        <action type="Rewrite" url="/" />
      </rule>
    </rules>
  </rewrite>
</system.webServer>

快速重写

var express = require('express');
var app = express();

app.use('/js', express.static(__dirname + '/js'));
app.use('/dist', express.static(__dirname + '/../dist'));
app.use('/css', express.static(__dirname + '/css'));
app.use('/partials', express.static(__dirname + '/partials'));

app.all('/*', function(req, res, next) {
    // Just send the index.html for other files to support HTML5Mode
    res.sendFile('index.html', { root: __dirname });
});

app.listen(3006); //the port you want to use

ASP.Net C# 重写

在Global.asax

private const string ROOT_DOCUMENT = "/default.aspx";

protected void Application_BeginRequest( Object sender, EventArgs e )
{
    string url = Request.Url.LocalPath;
    if ( !System.IO.File.Exists( Context.Server.MapPath( url ) ) )
        Context.RewritePath( ROOT_DOCUMENT );
}

Answer 3

这可能会令人沮丧，但我已经为您解决了。这已经过测试并适用于 Nginx Ubuntu 14/16/18.. with angular 5+

编辑 /etc/nginx/sites-enabled/default 或设置服务器设置的位置。这是有效的配置：

server {
    listen 80;
    server_name <YOUR SERVER DOMAIN>;

    access_log /var/log/nginx/nginx.vhost.access.log;
    error_log /var/log/nginx/nginx.vhost.error.log;

    index index.html index.htm;

    location / {
        root /wwweb/<location to angular dist>/dist;
        try_files $uri $uri/ /index.html?$query_string;
    }
}

刷新页面回环angular 404

loopback angular 404 on refresh page

loopback

express

angularjs

angular-ui-router