Question

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

为index.html添加了基本标记

<base href="/"/>

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

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

在角度路由器中设置HTML5模式（我使用ui-router）

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

我还从项目中删除了root.js.

我做错了什么？提前致谢

Answer 1

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

Angular app进入主屏幕，例如 your_domain /
导航到其他页面 - your_domain / somepage （如果是哈希爆炸模式，将 your_domain /＃somepage ）
刷新页面 - ＆gt;抛出404

如果你面对的场景如上所述，那么就会发生这种情况：

加载主页 - ＆gt; angular is bootstraped并设置路由
导航到＆＃34;某些页面＆＃34; - ＆GT; angular route处理这个并显示＆＃34; somepage＆＃34;
刷新页面 - ＆gt;请求命中服务器并请求 your_domain / somepage - 这在服务器中不可用
服务器返回404

如何处理？在404的情况下，Url会从服务器重写回 your_domain / 。这将启动角度应用，角度路由将处理请求

此处有更多详情 - 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 2

这可能令人沮丧，但我让您蒙住了阴影。经过测试，可以在Nginx Ubuntu 14/16/18 ..上使用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;
    }
}

Answer 3

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

刷新页面上的环回角度404

3 个答案: