刷新页面上的环回角度 404答案

【问题标题】：loopback angular 404 on refresh page刷新页面上的环回角度 404
【发布时间】：2017-01-01 02:21:52
【问题描述】：

我创建了一个带有环回和角度的应用程序，但我遇到了问题。当我刷新浏览器环回给我一个 404 url not Found。

在 index.html 中添加了 base 标签

<base href="/"/>

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

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

在 Angular 路由器中设置 HTML5 模式（我使用的是 ui-router）

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

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

我做错了什么？提前致谢

【问题讨论】：

我认为那是因为您使用的是 $locationProvider.html5Mode(true); 。试试这个$locationProvider.html5Mode(false);
Miqe 你是救命稻草，非常感谢！！！但是现在当我更改页面时，浏览器地址栏中的 url 不会改变。我该如何解决这个小问题？
很高兴知道，我已将我的评论作为答案。
@Daigo 如何使用 angular 2 或 angular4 来实现？

标签： angularjs express angular-ui-router loopback

【解决方案1】：

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

【讨论】：

【解决方案2】：

当您在 angularjs 中启用 html5 模式/推送状态模式时，这是您的服务器应该处理的常见情况。如果我正确理解了您的问题，则服务器会在您刷新页面时返回 404，否则如果从登录页面导航，则该页面将呈现正常。如果是这种情况，请告诉我：

Angular 应用进入主屏幕，例如 your_domain/
导航到其他页面 - your_domain/somepage（在 hash bang 模式下将是 your_domain/#somepage）
刷新页面 -> 抛出 404

如果您面临的情况与上面给出的一样，那么会发生这种情况：

加载主页 -> angular 已引导并设置路由
导航到“somepage” -> 角度路由处理此问题并显示“somepage”
刷新页面 -> 请求到达服务器并请求 your_domain/somepage - 这在服务器中不可用
服务器返回 404

如何处理？在 404 的情况下，是否将 Url 从服务器重写回 your_domain/。这将引导 Angular 应用程序，并且 Angular 路由将处理请求

从上面的网站复制粘贴

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 );
}

【讨论】：

完美解释解决这个问题。太感谢了。它解决了我的问题

【解决方案3】：

这可能令人沮丧，但我已经为您提供了保障。这是经过测试并在 Nginx Ubuntu 14/16/18 上工作的 .. 角度为 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;
    }
}

【讨论】：