페이지를 새로 고침하면 AngularJS HTML5 모드에서 잘못된 GET 요청이 발생합니다.

193

내 앱에 HTML5 모드를 사용하고 싶습니다. 같이 나는 구성을 위해 다음과 같은 코드를 넣어 가지고 여기 :

return app.config(['$routeProvider','$locationProvider', function($routeProvider,$locationProvider) {

    $locationProvider.html5Mode(true);
    $locationProvider.hashPrefix = '!';

    $routeProvider.when('/', {
        templateUrl: '/views/index.html',
        controller: 'indexCtrl'
    });
    $routeProvider.when('/about',{
        templateUrl: '/views/about.html',
        controller: 'AboutCtrl'
    });

보시다시피, 나는를 사용했고의 $locationProvider.html5mode모든 링크를 변경 ng-href하여/#/ .

문제

현재 localhost:9000/색인 페이지로 이동하여 다음과 같은 다른 페이지로 이동할 수 있습니다.localhost:9000/about 있습니다.

그러나 localhost:9000/about페이지를 새로 고칠 때 문제가 발생합니다 . 다음과 같은 결과가 나타납니다.Cannot GET /about

네트워크 통화를 보면 :

Request URL:localhost:9000/about
Request Method:GET

처음으로 가서 localhost:9000/다음으로 이동하는 버튼을 클릭 /about하면 :

Request URL:http://localhost:9000/views/about.html

페이지를 완벽하게 렌더링합니다.

새로 고침 할 때 각도를 사용하여 올바른 페이지를 얻으려면 어떻게해야합니까?

angularjs  html  angular-routing 
— Dieter De Mesmaeker
소스
— Sasha B.
1
나는 나를 위해 그것을 해결합니다. 여기를보십시오 stackoverflow.com/questions/22394014/…
— Sasha B.

답변:

99

로부터 각 문서

서버 측
이 모드를 사용하려면 서버 측에서 URL을 다시 작성해야합니다. 기본적으로 모든 링크를 응용 프로그램의 진입 점으로 다시 작성해야합니다 (예 : index.html)

그 이유 /about는 새로 고침 후 페이지 ( ) 를 처음 방문 할 때 브라우저가 이것이 실제 URL이 아니라는 것을 알 수있는 방법이 없기 때문에 계속해서로드하기 때문입니다. 그러나 루트 페이지를 먼저로드하고 모든 자바 스크립트 코드를로드 한 경우 /aboutAngular로 이동 하면 브라우저가 서버에 도달하고 그에 따라 처리하려고 시도하기 전에 Angular로 이동할 수 있습니다

— 제임스 샤프
소스
21
"응용 프로그램의 시작점에 대한 모든 링크를 다시 작성해야합니다"(예 : index.html)라고 표시되면 이것이 무엇을 의미합니까? 그것은 내가 들어가서 $routeProvider각각의 경로를 templateUrl예를 들어에서 templateUrl : '/views/about.html',로 변경 해야한다는 것을 의미합니까 templateUrl : 'example.com/views/about.html',?
7
아니요, $ routeProvider의 규칙은 그대로 유지해야합니다. 대답은 "서버 측"을 나타냅니다. 각도 HTML 페이지를 제공하는 서버에서 라우팅을 변경하는 것을 말합니다. 각 요청이 앵귤러 앱에 도착하기 전에 먼저 서버 측 라우팅을 통과해야합니다. 그러면 각 요청 방법에 따라 앵귤러 앱 진입 점 (예 : 'index.html'또는 '/')을 가리 키도록 모든 요청을 다시 작성해야합니다. 경로 작업).
— marni
CDN을 통해 축소 index.html을 제공하는 경우이 라우팅 메커니즘이 어떻게 실행됩니까?
— CrazyGeek
1
예 - 한 번 봐 가지고 stackoverflow.com/questions/22739455/...
— 제임스 샤프
5
아파치에 대한 좋은 기사, htaccess 예제가 있습니다
— Alcalyn
63

설정해야 할 것이 거의 없으므로 브라우저의 링크 모양과 http://yourdomain.com/path각도 구성 + 서버 측입니다.

1) AngularJS

$routeProvider
  .when('/path', {
    templateUrl: 'path.html',
  });
$locationProvider
  .html5Mode(true);

2) 서버 측,.htaccess 루트 폴더 안에 넣고 이것을 붙여 넣으십시오.

RewriteEngine On 
Options FollowSymLinks

RewriteBase /

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

angularjs의 html5 모드와 다른 환경에 필요한 구성에 대해 읽을 수있는 더 흥미로운 것들 https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server -to-work-with-html5mode 또한이 질문은 $ location / html5와 hashbang 모드 간 전환 / 링크 재 작성에 도움이 될 수 있습니다

— 로커
소스
안녕하세요. 위의 솔루션을 시도하고 구성 파일을 변경했습니다. 그러나 여전히 작동하지 않습니다. URL을 새로 고치면 여전히 "404 NOT FOUND"오류가 발생합니다.
— kTn
Websphere에 배포 된 앱에서 리디렉션 / 재 작성을 어떻게합니까?
— 게리
나는 왜 안 보입니까!
— lokers
36

비슷한 문제가 있었고 다음과 같이 해결했습니다.

  • <base href="https://stackoverflow.com/index.html">색인 페이지에서 사용

  • 다음과 같이 노드 / 익스프레스 서버에서 모든 라우트 미들웨어를 사용하십시오 (라우터 뒤에 놓으십시오).

app.use(function(req, res) {
    res.sendfile(__dirname + '/Public/index.html');
});

나는 그것이 당신을 가동시켜야한다고 생각합니다.

아파치 서버를 사용하는 경우 링크를 mod_rewrite 할 수 있습니다. 어렵지 않습니다. 구성 파일에서 약간의 변경 사항이 있습니다.

angularjs에서 html5mode를 사용한다고 가정합니다. 지금. 각도 1.2에서는 기본 URL을 선언하는 것이 더 이상 권장되지 않습니다.

— 테이
소스
1
이 솔루션은 설정 <base href="https://stackoverflow.com/">하고 제안한 Express 라우팅을 추가하는 데 효과적이었습니다. 감사합니다.
— Gilad Peleg
Tahir Chad,?를 구현 한 후에도 여전히 서버 측 url-rewrite를 사용해야 <base href="https://stackoverflow.com/index.html">합니까?
— Cody
예, 애플리케이션 / 웹 사이트의 기본 URL을 스톤 (도메인 포함)으로 설정하는 방법으로 URL 재 작성을 볼 수 있습니다. '기본 URL'html 문은 모든 상대 링크가 동일한 기본에서 올바르게 파생되도록하는 방법입니다. 링크가 절대적인 경우 기본 URL이 반드시 필요한 것은 아닙니다.
— Taye
1
이것을 사용할 때 실제 페이지로 렌더링되지 않고 페이지에 html 코드 자체가 표시됩니다.
— 노아
2
이 답변에는 트리플 스타가 필요합니다! 간단한 답변을 제공해 주셔서 감사합니다. 다른 모든 사람들은 "서버 리디렉션 수행에 대한 필요성"에 대해 같은 줄을 반복합니다.
— Ahmed Haque
27

BrowserSync 및 Gulp를위한 솔루션.

에서 https://github.com/BrowserSync/browser-sync/issues/204#issuecomment-102623643

첫 설치 connect-history-api-fallback:

npm --save-dev install connect-history-api-fallback

그런 다음 gulpfile.js에 추가하십시오.

var historyApiFallback = require('connect-history-api-fallback');

gulp.task('serve', function() {
  browserSync.init({
    server: {
      baseDir: "app",
      middleware: [ historyApiFallback() ]
    }
  });
});
— 오스카
소스
오 스냅! 앵귤러 뷰 개발에서 마침내 안심! 그리고 보너스로 표준 URL (해시 뱅이없는)도 라우팅됩니다! 감사합니다!
— 비트 덜
1
매력처럼 작동합니다. 대단히 감사합니다!
— Nishanth Nair 2016
1
특정 포트를 사용하는 경우 (예 : Ionic blank 템플릿이 포트 8100에서 실행 됨) 서버 뒤에 추가 속성을 server: { ... }, port: 8100추가 한 다음 serve작업을 기본 gulp 작업 (예 :)에 추가 gulp.task('default', ['sass', 'serve']);하면 앱을 실행할 수 있습니다 를 빼고 Cannot GET ...브라우저 오류 당신은 실행하여 페이지를 새로 고침 할 때 gulp. 서버를 실행하면 ionic serve여전히 오류가 발생합니다.
— Luke Schoen
이것은 개발 브라우저 동기화를 사용할 때 잘 작동합니다 .prod에서 응용 프로그램을 Express 앱으로 실행하고 모든 경로를 app.get ( '*', function (req, res) {req.session.valid = true로 각도 앱으로 리디렉션합니다. ; res.redirect ( '/');}); 경로를 직접 지정할 때 페이지가로드되지 않습니까?
— Mr AJ
13

앱을로드하려면 index.html에 모든 것을 다시 쓰도록 서버를 구성해야합니다.

https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#wiki-how-to-configure-your-server-to-work-with-html5mode

— 부여
소스
1
완벽하고 문제는 Laravel Forge를 사용하여 서버를 프로비저닝 try_files $uri $uri/ /index.php?...하는 데 필요했습니다 index.html. 링크 주셔서 감사합니다!
— CJ 톰슨
최고 답변이어야 함, 서버에 관계없이 모든 상황을 제공합니다. NodeJS와 완벽하게 협력
— Joe Lloyd
10

그런 프로젝트에 대한 URL 재 작성을 시뮬레이션하기 위해 간단한 연결 미들웨어를 작성했습니다. https://gist.github.com/muratcorlu/5803655

당신은 그렇게 사용할 수 있습니다 :

module.exports = function(grunt) {
  var urlRewrite = require('grunt-connect-rewrite');

  // Project configuration.
  grunt.initConfig({
    connect: {
      server: {
        options: {
          port: 9001,
          base: 'build',
          middleware: function(connect, options) {
            // Return array of whatever middlewares you want
            return [
              // redirect all urls to index.html in build folder
              urlRewrite('build', 'index.html'),

              // Serve static files.
              connect.static(options.base),

              // Make empty directories browsable.
              connect.directory(options.base)
            ];
          }
        }
      }
    }
  })
};
— 무랏 코롤
소스
에서 URL 재 작성을 수행하는 수동 방법이 $routeProvider있습니까?
1
나는 urlRewrite그것을 실행하려고 할 때 경고가 정의되어 있지 않으며, 사용할 수있는 다시 쓰기로 올바른 연결을 찾는 데 어려움을 겪고 있습니다.
"개체 빌드에는 'initConfig'메소드가 없습니다. --force를 사용하여 계속하십시오."라는 오류가 표시됩니다.
— edonbajrami
8

AngularJS가있는 MVC가있는 .NET 스택에 있다면 URL에서 '#'을 제거하기 위해 수행 해야하는 것입니다.

  1. _Layout 페이지에서 기본 href를 설정하십시오. <head> <base href="https://stackoverflow.com/"> </head>

  2. 그런 다음 각도 앱 구성에 다음을 추가하십시오. $locationProvider.html5Mode(true)

  3. 위의 URL에서 '#'을 제거하지만 페이지 새로 고침이 작동하지 않습니다. 예를 들어 "yoursite.com/about"에있는 경우 페이지 새로 고침에 404가 표시됩니다. 이는 MVC가 각도 라우팅에 대해 모르고 MVC 패턴으로 인해 MVC 라우팅 경로에없는 'about'에 대한 MVC 페이지를 찾습니다. 이에 대한 해결 방법은 모든 MVC 페이지 요청을 단일 MVC보기로 전송하는 것이며 모든 URL을 잡는 경로를 추가하여이를 수행 할 수 있습니다.

routes.MapRoute(
        name: "App",
        url: "{*url}",
        defaults: new { controller = "Home", action = "Index" }
    );
— 막 수드
소스
8

html5mode에서 페이지를 새로 고친 후 404 오류를 방지하기위한 IIS URL 다시 쓰기 규칙

Windows의 IIS에서 각도 실행

<rewrite>
  <rules>
    <rule name="AngularJS" 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>

html5mode에서 페이지를 새로 고친 후 404 오류를 방지하기 위해 NodeJS / ExpressJS 경로

Node / Express에서 앵귤러 러닝

var express = require('express');
var path = require('path');
var router = express.Router();

// serve angular front end files from root path
router.use('/', express.static('app', { redirect: false }));

// rewrite virtual urls to angular app to enable refreshing of internal pages
router.get('*', function (req, res, next) {
    res.sendFile(path.resolve('app/index.html'));
});

module.exports = router;

추가 정보 : AngularJS-NodeJS 및 IIS에서 404 오류없이 HTML5 모드 페이지 새로 고침 사용

— 제이슨
소스
고맙게도 IIS 규칙은 Azure에 배포 된 angular2 앱을 사용하여 하위 경로로 연결하지 못했습니다.
— bitsprint
IIS 솔루션 (VS 2013의 localhost)에 대해 충분히 감사드립니다. 좌절감으로 오랫동안 내 머리를 강타하고 마침내이 답변을 찾았습니다. 매력처럼 일했다.
— Florida G.
5

다른 사람들이 언급했듯이 서버에서 경로를 다시 작성하고 설정해야합니다. <base href="https://stackoverflow.com/"/> 합니다.

의 경우 gulp-connect:

npm install connect-pushstate

var gulp = require('gulp'),
  connect = require('gulp-connect'),
  pushState = require('connect-pushstate/lib/pushstate').pushState;
...
connect.server({
  ...
  middleware: function (connect, options) {
    return [
      pushState()
    ];
  }
  ...
})
....
— 브렛
소스
4

내 개발 환경에서 아파치 (xampp)를 사용하고 프로덕션에서 아파치를 사용하고 있습니다.

errorDocument 404 /index.html

htaccess 로이 문제를 해결하십시오.

— Crlshn
소스
4

Grunt 및 Browsersync의 경우 connect-modrewrite를 사용 하십시오.

var modRewrite = require('connect-modrewrite');    


browserSync: {
            dev: {
                bsFiles: {

                    src: [
                        'app/assets/css/*.css',
                        'app/*.js',
                        'app/controllers/*.js',
                        '**/*.php',
                        '*.html',
                        'app/jade/includes/*.jade',
                        'app/views/*.html',
               ],
            },
        options: {
            watchTask: true,
            debugInfo: true,
            logConnections: true,
            server: {
                baseDir :'./',
                middleware: [
                       modRewrite(['!\.html|\.js|\.jpg|\.mp4|\.mp3|\.gif|\.svg\|.css|\.png$ /index.html [L]'])
                ]
            },

            ghostMode: {
                scroll: true,
                links: true,
                forms: true
                    }
                }
            }
        },
— MrThunder
소스
시간의 허비 인이 답변 위에 15가 있습니다. 1. npm install connect-modrewrite --save2. require in gruntfile3. 위 서버 obj
— Omar
감사합니다. browserSync 설정을 사용하여 gulp 4에서 저에게 효과적이었습니다.
— Abdeali Chandanwala 2016 년
@Abdeali Chandanwala 님이 도움을 주셔서 감사합니다.
— MrThunder
@Omar 나는 당신과 동의하지 않습니다. 저 같은 저급 사용자는 gulpfile에 그것을 추가하는 방법을 보는 것이 좋습니다. 사람들은 다른 수준의 지식을 가지고 있으며 gruntfile에 글을 쓰는 것만으로는 도움이되지 않는다는 것을 기억하는 것이 가장 좋습니다.
— MrThunder
3

나는 해결했다 

test: {
        options: {
          port: 9000,
          base: [
            '.tmp',
            'test',
            '<%= yeoman.app %>'
          ],
         middleware: function (connect) {
                  return [
                      modRewrite(['^[^\\.]*$ /index.html [L]']),
                      connect.static('.tmp'),
                      connect().use(
                          '/bower_components',
                          connect.static('./bower_components')
                      ),
                      connect.static('app')
                  ];
              }
        }
      },
— 실비오 트로이아
소스
3

더 큰 질문 에서이 질문에 대답하고 있습니다.

$ locationProvider.html5Mode (true)를 추가하면 내 사이트에서 URL 붙여 넣기를 허용하지 않습니다. html5Mode가 true 일 때 서버가 작동하도록 구성하려면 어떻게해야합니까?

html5Mode를 사용하도록 설정하면 # 문자가 더 이상 URL에 사용되지 않습니다. # 기호는 서버 측 구성이 필요하지 않기 때문에 유용합니다. #이 없으면 URL이 훨씬 멋지게 보이지만 서버 측 다시 쓰기도 필요합니다. 여기 몇 가지 예가 있어요.

AngularJS를 사용한 Express Rewrites의 경우 다음 업데이트로이 문제를 해결할 수 있습니다.

app.get('/*', function(req, res) {
res.sendFile(path.join(__dirname + '/public/app/views/index.html'));
});

과 

<!-- FOR ANGULAR ROUTING -->
<base href="/">

과

app.use('/',express.static(__dirname + '/public'));
— 아이언 하트
소스
그 솔루션에 감사드립니다. Nodejs의 경우 app.js를 app.use ( '/ *', index)에 추가하십시오.
— Tigin
2

귀하의 문제는 서버와 관련이 있다고 생각합니다. HTML5 모드와 관련된 각도 문서 (질문의 링크에서)는 다음과 같습니다.

서버 측이 모드를 사용하려면 서버 측에서 URL을 다시 작성해야합니다. 기본적으로 모든 링크를 응용 프로그램의 진입 점으로 다시 작성해야합니다 (예 : index.html)

/ about에서 /로 URL 다시 쓰기를 설정해야한다고 생각합니다.

— 루 쿠마
소스
답변 주셔서 감사합니다. 정보 페이지에 있고 새로 고칠 때 서버는 URL을 /? 문제는 다른 도메인에있는 레일 백엔드로 작업한다는 것입니다. 모든 커뮤니케이션은 API 호출에 의한 것입니다. 이 URL을 어떻게 다시 작성합니까?
— Dieter De Mesmaeker
문제는 귀하의 앱이 /의 서버 경로에서 사용 가능하다는 것입니다. 따라서 / about 인 URL을 새로 고치면 브라우저가 / about에있는 페이지가 무엇이든 서버에서 요청합니다 (이 경우 페이지가 없으므로 리디렉션해야합니다) 다시).
— lucuma
2

Express에서 서버 리디렉션이있었습니다.

app.get('*', function(req, res){
    res.render('index');
});

추가 한 후에도 여전히 페이지 새로 고침 문제가 발생했습니다. <base href="https://stackoverflow.com/" /> .

솔루션 : 페이지에서 실제 링크를 사용하여 탐색하는지 확인하십시오. URL에 경로를 입력하지 않으면 페이지를 새로 고칩니다. (어리석은 실수입니다.)

:-피

— 코디
소스
그러나이 모든 http 요청으로 인해 색인 파일이 생깁니다. 예를 들면 다음과 같습니다. / getJsonFromServer-데이터를 반환하는 http 요청이지만이 구성으로 인해 색인 페이지도 반환합니다
— vijay
1

마지막으로 AngularJs 자체의 문제와 비슷하기 때문에 서버 측 에서이 문제를 해결할 수있는 방법을 얻었습니다 .1.5 Angularjs를 사용하고 있으며 페이지를 다시로드 할 때도 동일한 문제가 발생했습니다. 그러나 내 server.js파일에 아래 코드를 추가 하면 내 일이 저장 되지만 올바른 해결책이 아니거나 좋은 방법은 아닙니다.

app.use(function(req, res, next){
  var d = res.status(404);
     if(d){
        res.sendfile('index.html');
     }
});
— 아닐 야다 브
소스
0

동일한 디렉토리에 index.html과 Gruntfile.js가 있으면 작동하는 Grunt 플러그인이 더 좋습니다.

https://npmjs.org/package/grunt-connect-pushstate

그런 다음 Gruntfile에서 :

 var pushState = require('grunt-connect-pushstate/lib/utils').pushState;


    connect: {
    server: {
      options: {
        port: 1337,
        base: '',
        logger: 'dev',
        hostname: '*',
        open: true,
        middleware: function (connect, options) {
          return [
            // Rewrite requests to root so they may be handled by router
            pushState(),
            // Serve static files
            connect.static(options.base)
          ];
        }
      },
    }
},
— 미카 우 라흐
소스
grunt-connect-pushstate 모듈은 더 이상 사용되지 않습니다
— Evan Plaice
0 
I solved same problem using modRewrite.  
AngularJS is reload page when after # changes.  
But HTML5 mode remove # and invalid the reload.  
So we should reload manually.
# install connect-modrewrite
    $ sudo npm install connect-modrewrite --save

# gulp/build.js
    'use strict';
    var gulp = require('gulp');
    var paths = gulp.paths;
    var util = require('util');
    var browserSync = require('browser-sync');
    var modRewrite  = require('connect-modrewrite');
    function browserSyncInit(baseDir, files, browser) {
        browser = browser === undefined ? 'default' : browser;
        var routes = null;
        if(baseDir === paths.src || (util.isArray(baseDir) && baseDir.indexOf(paths.src) !== -1)) {
            routes = {
                '/bower_components': 'bower_components'
            };
        }

        browserSync.instance = browserSync.init(files, {
            startPath: '/',
            server: {
            baseDir: baseDir,
            middleware: [
                modRewrite([
                    '!\\.\\w+$ /index.html [L]'
                ])
            ],
            routes: routes
            },
            browser: browser
        });
    }
— keiwt
소스
0

JHipster로 생성 된 java + 각도 앱 과 동일한 문제 가 있었습니다 . 필터와 속성의 모든 각도 페이지 목록으로 해결했습니다.

application.yml :

angular-pages:
  - login
  - settings
...

AngularPageReloadFilter.java

public class AngularPageReloadFilter implements Filter {
    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
        request.getRequestDispatcher("index.html").forward(request, response);
    }
}

WebConfigurer.java

private void initAngularNonRootRedirectFilter(ServletContext servletContext,
                                              EnumSet<DispatcherType> disps) {
    log.debug("Registering angular page reload Filter");
    FilterRegistration.Dynamic angularRedirectFilter =
            servletContext.addFilter("angularPageReloadFilter",
                    new AngularPageReloadFilter());
    int index = 0;
    while (env.getProperty("angular-pages[" + index + "]") != null) {
        angularRedirectFilter.addMappingForUrlPatterns(disps, true, "/" + env.getProperty("angular-pages[" + index + "]"));
        index++;
    }
    angularRedirectFilter.setAsyncSupported(true);
}

희망, 누군가에게 도움이 될 것입니다.

— 이고르 즈 보이 치크
소스
0

Gulp + browserSync :

npm을 통해 connect-history-api-fallback을 설치 한 후 나중에 서브 펄프 작업을 구성하십시오.

var historyApiFallback = require('connect-history-api-fallback');

gulp.task('serve', function() {
  browserSync.init({
    proxy: {
            target: 'localhost:' + port,
            middleware: [ historyApiFallback() ]
        }
  });
});
— 오스카 케이 세도
소스
0

서버 측 코드는 JAVA이며 다음 단계를 따르십시오.

1 단계 : urlrewritefilter JAR 다운로드 여기를 클릭하십시오 하고 경로를 빌드하여 저장 WEB-INF / lib

2 단계 : HTML5 모드 활성화 $ locationProvider.html5Mode (true);

3 단계 : 기본 URL 설정 <base href="https://stackoverflow.com/example.com/"/>

4 단계 : WEB.XML에 복사하여 붙여 넣기 

 <filter>
     <filter-name>UrlRewriteFilter</filter-name>
 <filter-class>org.tuckey.web.filters.urlrewrite.UrlRewriteFilter</filter-class>
</filter>

<filter-mapping>
    <filter-name>UrlRewriteFilter</filter-name>
    <url-pattern>/*</url-pattern>
    <dispatcher>REQUEST</dispatcher>
    <dispatcher>FORWARD</dispatcher>
</filter-mapping>

5 단계 : WEN-INF / urlrewrite.xml에 파일 작성

 <urlrewrite default-match-type="wildcard">


    <rule>
            <from>/</from>
            <to>/index.html</to>
        </rule>

    <!--Write every state dependent on your project url-->
    <rule>
            <from>/example</from>
            <to>/index.html</to>
        </rule>
    </urlrewrite>
— 센틸 라자
소스
- 같은 동적 URL에 대한 규칙을 추가하는 방법 test.com/user/101의 test.com/user/102
— 크리슈나 쿠마 Chourasiya에게
0

나는이 간단한 해결책과 그 작품을 가지고있다.

앱 / 예외 /Handler.php

이것을 맨 위에 추가하십시오.

use Symfony\Component\HttpKernel\Exception\NotFoundHttpException;

그런 다음 render 메소드 내부

public function render($request, Exception $exception)
{
    .......

       if ($exception instanceof NotFoundHttpException){

        $segment = $request->segments();

        //eg. http://site.dev/member/profile
        //module => member
        // view => member.index
        //where member.index is the root of your angular app could be anything :)
        if(head($segment) != 'api' && $module = $segment[0]){
            return response(view("$module.index"), 404);
        }

        return response()->fail('not_found', $exception->getCode());

    }
    .......

     return parent::render($request, $exception);
}
— 에메 카 음바
소스
0

node.js 파일에 아래 코드 스 니펫을 추가하여 문제를 해결했습니다.

app.get("/*", function (request, response) {
    console.log('Unknown API called');
    response.redirect('/#' + request.url);
});

참고 : 페이지를 새로 고치면 URL에 # 태그가 없기 때문에 Angular 페이지 대신 API를 찾습니다. 위의 코드를 사용하여 #을 사용하여 URL로 리디렉션합니다.

— 람 골라 팔리
소스
-2

web.config에 규칙을 작성하십시오.

<system.webServer>
  <rewrite>
    <rules>
    <rule name="AngularJS Routes" stopProcessing="true">
      <match url=".*" />
      <conditions logicalGrouping="MatchAll">
        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
        <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
      </conditions>
      <action type="Rewrite" url="/" />
    </rule>
       </rules>
    </rewrite>
</system.webServer>

색인에서 이것을 추가하십시오

<base href="/">

그것은 아마 당신을 위해 Html5Mode app.config를 설정하는 것을 잊어 버렸습니다.

app.config(function ($stateProvider, $urlRouterProvider, $locationProvider){
    $locationProvider.html5Mode({ enabled: true, requireBase: true });
    $locationProvider.hashPrefix('!');
}
— 사용자 3084147
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.