페이지를 새로고침하면 AngularJS HTML5 모드에서 잘못된 GET 요구가 발생한다.
앱에서 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/#/.
문제
금은 to 갈 수 있어요.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
그럼 페이지가 완벽하게 그려지네요
새로 고칠 때 올바른 페이지를 얻으려면 어떻게 해야 하나요?
각도 도큐에서
( )
하려면 서버에서 URL을 (index를 다시 .기본적으로 어플리케이션의 엔트리 포인트에 대한 모든 링크를 다시 써야 합니다(index.html 등).
때(「 」 「 」 「 」 「 」 ） 。/about예를 들어, 새로고침 후 브라우저는 이것이 실제 URL이 아님을 알 수 없으므로 계속 로드합니다. 루트 코드를 먼저 자바스크립트로 /about할 수 .Angular는 서버에 히트하기 전에 액세스 할 수 있습니다.
가 "Browser"와 같이 .http://yourdomain.com/path은 각진 + 쪽입니다.
1) 각도JS
$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 이 질문은 html5 모드와 해시방 모드 간의 $location/전환/링크 재작성에도 도움이 될 수 있습니다.
저도 비슷한 문제가 있어서 해결했습니다.
「」를 사용합니다.
<base href="/index.html">노드/Express 서버의 모든 루트 미들웨어를 다음과 같이 catch all route middleware를 사용합니다(라우터 뒤에 배치합니다).
app.use(function(req, res) {
res.sendfile(__dirname + '/Public/index.html');
});
그렇게 하면 기운을 차릴 수 있을 것 같아요.
Apache 서버를 사용하는 경우 링크를 mod_rewrite할 수 있습니다.그것은 어려운 일이 아니다.컨피규레이션파일의 변경은 몇 가지뿐입니다.
이 모든 것은 angularjs에서 html5 모드가 유효하다고 가정합니다.이제 각도 1.2에서는 베이스 URL을 선언하는 것이 더 이상 권장되지 않습니다.
Browser Sync 및 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() ]
}
});
});
앱을 로드하려면 모든 것을 index.html로 다시 쓰도록 서버를 구성해야 합니다.
grunt 프로젝트에서 url-rewriting을 시뮬레이트하기 위한 간단한 Connect 미들웨어를 작성했습니다.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)
];
}
}
}
}
})
};
에 있는 경우.MVC와 AngularJs를 사용하는 NET 스택에서는 다음과 같이 URL에서 '#'을 삭제해야 합니다.
를 _Layout 페이지: _Layout 로 설정합니다.
<head> <base href="/"> </head>다음 앱 구성에 과 같이 합니다.
$locationProvider.html5Mode(true)위에서는 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" }
);
html5 모드에서 페이지 새로 고침 후 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>
NodeJS / Expresshtml5 모드에서 페이지 새로 고침 후 404 오류를 방지하는 JS 경로
노드/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 - NodeJ 및 IIS에서 404 오류 없이 HTML5 모드 페이지 새로 고침 활성화
한 바와 같이 "Da's Return"을 설정해야 .<base href="/"/>.
★★★의 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()
];
}
...
})
....
개발 환경에서 apache(xampp)를 사용하고 프로덕션 환경에서 apache를 사용하고 있습니다. 추가:
errorDocument 404 /index.html
.htaccess를 통해 이 문제를 해결합니다.
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
}
}
}
},
나는 해결했다
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')
];
}
}
},
저는 더 큰 질문에서 이 질문에 답합니다.
$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'));
당신의 문제는 서버에 관한 것이라고 생각합니다.HTML5 모드(질문의 링크)에 관한 각도의 문서에는 다음과 같이 기재되어 있습니다.
서버측 이 모드를 사용하려면 서버측에서 URL을 고쳐 써야 합니다.기본적으로 어플리케이션의 엔트리 포인트에 대한 모든 링크(index.html 등)를 고쳐 써야 합니다.
url을 /about에서 /로 고쳐야 할 것 같습니다.
Express에서 서버 리다이렉트가 있었습니다.
app.get('*', function(req, res){
res.render('index');
});
그리고 우리는 여전히 페이지 넘김 문제가 발생하였습니다.<base href="/" />.
해결책: 페이지에 있는 실제 링크를 사용하여 탐색하고 있는지 확인합니다.URL에 경로를 입력하지 마십시오.그렇지 않으면 페이지 리프레쉬가 표시됩니다.(실수, 알고 있습니다)
:-P
마침내 서버 측에서 이 문제를 해결하는 방법을 알게 되었습니다.이는 AngularJs 자체의 문제에 가깝기 때문입니다.1.5 Angularjs를 사용하고 있으며 페이지 새로고침 시에도 같은 문제가 발생했기 때문입니다.하지만 아래 코드를 추가한 후server.jsfile 그것은 나의 시간을 구하지만 그것은 적절한 해결책도 아니고 좋은 방법도 아닙니다.
app.use(function(req, res, next){
var d = res.status(404);
if(d){
res.sendfile('index.html');
}
});
아래 코드 스니펫을 node.js 파일에 추가하여 문제를 해결했습니다.
app.get("/*", function (request, response) {
console.log('Unknown API called');
response.redirect('/#' + request.url);
});
주의: 페이지를 갱신하면 Angular 페이지가 아닌 API가 검색됩니다(URL에 #태그가 없기 때문에). 위 코드를 사용하여 #가 있는 URL로 수정합니다.
index.html 와 Gruntfile.js 가 같은 디렉토리에 있는 경우, 보다 뛰어난 Grunt 플러그 인을 찾을 수 있었습니다.
https://npmjs.org/package/grunt-connect-pushstate
그 후 Grunt 파일에서 다음을 수행합니다.
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)
];
}
},
}
},
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
});
}
JHIPster에서 생성된 java + angular app에서도 같은 문제가 있었습니다.필터와 속성의 모든 각진 페이지 목록을 사용하여 해결했습니다.
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);
}
}
Web Configurer.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);
}
호프, 그게 누군가에게 도움이 될 거야.
Gulp + 브라우저 동기화:
npm 경유로 connect-history-api-fallback을 설치하고 나중에 serve gul 태스크를 설정합니다.
var historyApiFallback = require('connect-history-api-fallback');
gulp.task('serve', function() {
browserSync.init({
proxy: {
target: 'localhost:' + port,
middleware: [ historyApiFallback() ]
}
});
});
서버측 코드는 JAVA 입니다.다음 절차를 따릅니다.
순서 1 : urlrewritefilter JAR 다운로드 여기를 클릭하여 저장하여 빌드 경로 WEB-INF/lib
스텝 2 : HTML5 모드 $locationProvider.html5Mode(true)를 유효하게 합니다.
3 : URL " " 3 : " URL "<base href="/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/urrewrite.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>
지금까지 사용해 온 심플한 솔루션과 그 기능을 가지고 있습니다.
앱/예외/핸들러에서.php
맨 위에 추가:
use Symfony\Component\HttpKernel\Exception\NotFoundHttpException;
그런 다음 렌더링 방법 내부
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);
}
언급URL : https://stackoverflow.com/questions/16569841/reloading-the-page-gives-wrong-get-request-with-angularjs-html5-mode
'source' 카테고리의 다른 글
| MUI에서 원색 및 보조 색상 변경 (0) | 2023.03.25 |
|---|---|
| ng-options를 사용하여 값 내의 변수 유형을 억제하려면 어떻게 해야 합니까? (0) | 2023.03.25 |
| AngularJS: HTTP 인터셉터에 서비스 주입(순환 의존성) (0) | 2023.03.25 |
| angular ui-router: 해결 중인 toState의 $state 정보를 가져옵니다. (0) | 2023.03.25 |
| 리액트 입력에 의한 Lodash 데바운스 (0) | 2023.03.25 |