刷新页面上的环回角度 404 [英] loopback angular 404 on refresh page

问题描述

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

I have create an application with loopback and angular but i have a problem. When i refresh the browser loopback give me a 404 url not Found.

在 index.html 中添加了基本标签

Added base tag to index.html

<base href="/"/>

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

Set middlelware.json properly to serve static content:

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

在角度路由器中设置 HTML5 模式(我使用的是 ui-router)

Set HTML5 mode in angular router (I'm using ui-router)

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

我尚未从项目中删除 root.js.

I have yet deleted root.js from the project.

我做错了什么?提前致谢

What i'm doing wrong? Thanks in advance

推荐答案

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

When you have enabled html5 mode/ push state mode ON in angularjs, this is a common scenario which your server should handle. If I understood your problem correctly, server returns 404 when you refresh the page which otherwise render fine if navigated from landing page. Let me know if this is the scenario:

• Angular 应用进入主屏幕，比如 your_domain/
• 导航到其他页面 - your_domain/somepage(如果是哈希模式，将是 your_domain/#somepage)
• 刷新页面 -> 抛出 404

• Angular app lands into Home screen, say your_domain/
• Navigate to some other page - your_domain/somepage (which will be your_domain/#somepage in case of hash bang mode)
• Refresh the page -> throws 404

如果您面临的情况与上面给出的一样，那么会发生以下情况:

If the scenario which you face is like given above, then this is what happens:

• 加载主页 -> angular 被引导并设置路由
• 导航到somepage" -> angular route 处理这个并显示somepage"
• 刷新页面 -> 请求命中服务器并请求 your_domain/somepage - 这在服务器中不可用
• 服务器返回 404

• Loads the home page -> angular is bootstraped and routing is set up
• Navigates to "somepage" -> angular route handles this and show "somepage"
• Refresh the page -> request hits the server and requests for your_domain/somepage - which is not available in server
• server returns 404

如何处理?如果出现 404，请从服务器将 URL 重写回 your_domain/.这将引导 angular 应用程序，并且 angular 路由将处理请求

How to handle this? Do Url rewrite back to your_domain/ from server in case of 404. This will bootstrap the angular app and angular route will handle the request

这里有更多细节 - https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode

More details here - 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 中

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

这篇关于刷新页面上的环回角度 404的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！