페이지를 새로 고치면 "페이지를 찾을 수 없습니다"가 표시됩니다.

페이지를 새로 고치면 "페이지를 찾을 수 없습니다"가 표시됩니다.

하나의 ng뷰와 여러 개의 컨트롤러와 뷰를 사용하는 앱을 가지고 있습니다.루트를 탐색하면 다음과 같이 됩니다.www.example.com, 모든 것이 작동합니다.Ctrl+R(Refresh)을 누르면 "404 error not Found(페이지를 찾을 수 없습니다)"라는 메시지가 나타납니다.예: 이 페이지를 새로 고치면 오류가 발생합니다. http://example.com/item/1/.

그러나 해시방을 사용하여 페이지에 접속하면 works.eg:http://example.com/#!/item/1/

이 문제를 어떻게 해결해야 할까요?나의.htaccess비어 있습니다.그리고 HTML5 해시방을 지원하는 크롬을 사용하고 있습니다.

브라우저가 호출할 때http://example.com/#!/item/1/의 인덱스 페이지를 호출하고 있습니다.http://example.com/해시태그를 분석하여 표시할 콘텐츠를 결정합니다.

브라우저가 호출할 때http://example.com/item/1/서버가 의 인덱스 페이지에 서비스를 제공하려고 합니다.http://example.com/item/1/검출할 수 없기 때문에, 404 에러가 발생합니다.

원하는 것을 달성하려면 다음 중 하나를 수행해야 합니다.

• 루트 인덱스 페이지에 대한 링크를 다시 쓰는 다시 쓰기 규칙을 만듭니다.
• URL 대신 해시태그를 생성하도록 JS를 조정합니다.각도를 사용하는 경우그런 다음 JS는 html5 모드를 끕니다.$locationProvider.html5Mode(false);, 또는
• 색인 페이지를 삽입하다http://example.com/item/1/로 리다이렉트 됩니다.http://example.com/#!/item/1/- 단, /prettyPath/creta마다 이 작업을 반복해야 합니다.

Apache를 사용하고 인덱스 파일이 index.html이라고 가정하면 다른 두 가지 솔루션 중 하나를 시도하기 전에 .htaccess 파일에 다음 항목을 추가하여 다시 쓰기 규칙을 만들어 보십시오.

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^(.*)       /index.html/#/$1 
</IfModule>

순수 각도(Pure Angular)를 사용하는 경우서버 측 로직이 없는 JS/Ajax 솔루션을 index.php를 index.html(또는 루트 인덱스 파일 이름에 따라 index.htm)로 변경합니다.

다음 스크립트를 .htaccess에 추가하면 됩니다.

RewriteEngine On 
Options FollowSymLinks

RewriteBase /

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /#/$1 [L]

이것은 입니다.URL 개서(IIS)의 NET 버전

<system.webServer>
    <rewrite>
      <!--This directive was not converted because it is not supported by IIS: RewriteBase /.-->
      <rules>
        <rule name="Imported Rule 1" stopProcessing="true">
          <match url="^index\.html" ignoreCase="false" />
          <action type="None" />
        </rule>
        <rule name="Imported Rule 2" stopProcessing="true">
          <match url="." ignoreCase="false" />
          <conditions>
            <add input="{REQUEST_FILENAME}" matchType="IsFile" ignoreCase="false" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" ignoreCase="false" negate="true" />
          </conditions>
          <action type="Rewrite" url="/index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>

여기 이 블로그에 대한 훌륭한 게시물...http://ericduran.io/2013/05/31/angular-html5Mode-with-yeoman/

"이것은 주로 당신의 각도가JS 루트는 실제 html 페이지가 아닙니다.예를 들어 각도 앱에 /create-order에 대한 경로가 있는 경우 등이 있습니다.이 URL은 앱 내부에서 링크하면 정상적으로 동작하지만 사용자가 해당 페이지로 직접 이동하려고 하면 서버가 404를 반환합니다.

2018년 3월 현재, 아래 행만 추가해 주세요..htaccess파일.

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
#RewriteRule ^(.front-end*)$ /front-end [NC,L,QSA]
RewriteRule ^(.*)$ /index.html [NC,L,QSA]  

이것이 당신에게 도움이 되기를 바랍니다.

코멘트는 못 했지만HTML mode,base href="/",sudo a2enmod rewrite 를 사용합니다..htaccess어쩔 수 없었다AllowOverride All고객님의 사이트와/etc/apache2 apache.conf

    <ifModule mod_rewrite.c>
      RewriteEngine On
      RewriteCond %{REQUEST_FILENAME} !-f
      RewriteCond %{REQUEST_FILENAME} !-d
      RewriteCond %{REQUEST_URI} !index
      RewriteCond %{REQUEST_URI} !.*\.(css  js|html|png)
      RewriteRule (.*) index.html [L]
    </ifModule>

이를 .htaccess로 사용합니다.

리액트 앱을 GitHub에 배포하고 렌더할 때도 비슷한 문제가 있었습니다.루팅을 위해 리액트 라우터를 사용하고 있었습니다.이 솔루션은 리액트 라우터에서 제공하는 Browser Router 대신 Hash Router를 사용하는 것이었습니다.안타깝게도 이러한 플랫폼에 배포하는 동안 .htaccess 파일에 액세스할 수 없었기 때문에 편집할 수 없었습니다.어쩔 수 없이 HashRouter를 사용하게 되었습니다.

이 답변은 비슷한 문제에 직면한 create-react-app 배포에 어려움을 겪고 있는 사용자에게 도움이 될 수 있습니다.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from '../src/components/App/App';
import { HashRouter } from "react-router-dom";


ReactDOM.render(
  <React.StrictMode>
    <HashRouter>
      <App />
    </HashRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

언급URL : https://stackoverflow.com/questions/14168836/refreshing-page-gives-page-not-found