새로 고침 페이지의 루프백 각도 404

Question

루프백 및 각도로 애플리케이션을 만들었지 만 문제가 있습니다. 브라우저 루프백을 새로 고침하면 404 URL을 찾을 수 없습니다.

이 추가 된 기본 태그 제대로 정적 컨텐츠를 제공하기 위해 middlelware.json

<base href="/"/> 

설정을 index.html을 위해 (내가 UI 라우터를 사용하고 있습니다)

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

설정 각 라우터에서 HTML5 모드를

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

아직 프로젝트에서 root.js를 삭제했습니다.

내가 뭘 잘못하고있어? 미리 감사드립니다.

Answer 1

angularjs에서 html5 모드/푸시 스테이트 모드를 유효하게했을 때, 이것은 서버가 처리해야하는 일반적인 시나리오입니다. 문제를 올바르게 이해했다면 서버는 방문 페이지에서 탐색 할 때 제대로 렌더링되는 페이지를 새로 고칠 때 404를 반환합니다. 이 시나리오의 경우 알려줘 : 홈 화면에

• 각도 응용 프로그램 땅, your_domain 형식/
• 이동 다른 페이지 말한다 - your_domain 형식/somepage (것 your_domain 형식/#의 somepage을
• 이 페이지를 새로 고침 해시 뱅 모드의 경우)에은 - 당신이 직면하는 시나리오 등은 위에 주어진 경우>는 t 다음, 404

를 던졌습니다 자신이 무슨이다 :

• 로드 홈 페이지 -> 각도가 bootstraped하고 라우팅 "somepage"으로
• 를 탐색을 설정 -> 각 경로가 "somepage"
• 페이지를 새로 고침을이 문제를 처리하고 보여 - 서버가 404

어떻게이 문제를 처리하기 위해 반환

서버에서 사용할 수 없습니다 -> 요청 your_domain 형식/somepage에 대한 서버 및 요청 안타? 404의 경우 서버에서 your URL/으로 URL이 으로 다시 작성됩니다.

아파치 다시 쓰기

<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에게 웹 사이트 위에서 https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode

복사 붙여 넣기 -이 요청을 여기

자세한 정보를 처리 할 각 응용 프로그램 및 각 경로를 부트 스트랩합니다 다시 쓰기

server { 
    server_name my-app; 

    root /path/to/app; 

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

하늘빛은 IIS

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에

012

<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> 

익스프레스 다시 쓰기 재기록

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

$locationProvider.html5Mode(true);을 사용하고 있기 때문입니다. 이것을 시도하십시오 $locationProvider.html5Mode(false);