페이지를 새로 고침하면 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를 제외한 모든 링크를 변경 했습니다 /#/.
문제
현재 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.html)
그 이유는 /about예를 들어 새로 고침 후 페이지 ( ) 를 처음 방문 할 때 브라우저가 이것이 실제 URL이 아니라는 것을 알 수있는 방법이 없기 때문에 계속해서로드하기 때문입니다. 그러나 루트 페이지를 먼저로드하고 모든 자바 스크립트 코드를로드 한 경우 /aboutAngular로 이동 하면 브라우저가 서버에 도달하고 그에 따라 처리하기 전에 Angular로 이동할 수 있습니다
설정해야 할 것이 거의 없으므로 브라우저의 링크 모양과 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 모드 간 전환 / 링크 재 작성에 도움이 될 수 있습니다
비슷한 문제가 있었고 다음과 같이 해결했습니다.
<base href="/index.html">색인 페이지에서 사용다음과 같이 노드 / 익스프레스 서버에서 모든 라우트 미들웨어를 사용하십시오 (라우터 뒤에 놓으십시오).
app.use(function(req, res) {
res.sendfile(__dirname + '/Public/index.html');
});
나는 그것이 당신을 가동시켜야한다고 생각합니다.
아파치 서버를 사용하는 경우 링크를 mod_rewrite 할 수 있습니다. 어렵지 않습니다. 구성 파일에서 약간의 변경 사항이 있습니다.
angularjs에서 html5mode를 사용한다고 가정합니다. 지금. 각도 1.2에서는 기본 URL을 선언하는 것이 더 이상 권장되지 않습니다.
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() ]
}
});
});
앱을로드하려면 index.html에 모든 것을 다시 쓰도록 서버를 구성해야합니다.
그런 프로젝트에 대한 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)
];
}
}
}
}
})
};
AngularJS가있는 MVC가있는 .NET 스택에 있다면 URL에서 '#'을 제거하기 위해 수행 해야하는 것입니다.
_Layout 페이지에서 기본 href를 설정하십시오.
<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" }
);
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 모드 페이지 새로 고침 사용
다른 사람들이 언급했듯이 서버에서 경로를 다시 쓰고 설정해야 <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()
];
}
...
})
....
내 개발 환경에서 아파치 (xampp)를 사용하고 프로덕션에서 아파치를 사용하고 있습니다.
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)
/ about에서 /로 URL 다시 쓰기를 설정해야한다고 생각합니다.
Express에서 서버 리디렉션이있었습니다.
app.get('*', function(req, res){
res.render('index');
});
을 추가 한 후에도 여전히 페이지 새로 고침 문제가 발생했습니다 <base href="/" />.
솔루션 : 페이지에서 실제 링크를 사용하여 탐색하는지 확인하십시오. URL에 경로를 입력하지 않으면 페이지를 새로 고칩니다. (어리석은 실수입니다.)
:-피
마지막으로 AngularJs 자체의 문제와 비슷하기 때문에 서버 측 에서이 문제를 해결할 수있는 방법을 얻었습니다 .1.5 Angularjs를 사용하고 있으며 페이지를 다시로드 할 때도 동일한 문제가 발생했습니다. 그러나 내 server.js파일에 아래 코드를 추가 하면 내 일이 저장 되지만 올바른 해결책이 아니거나 좋은 방법은 아닙니다.
app.use(function(req, res, next){
var d = res.status(404);
if(d){
res.sendfile('index.html');
}
});
동일한 디렉토리에 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)
];
}
},
}
},
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 + 각도 앱 과 동일한 문제 가 있었습니다 . 필터와 속성의 모든 각도 페이지 목록으로 해결했습니다.
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);
}
희망, 누군가에게 도움이 될 것입니다.
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() ]
}
});
});
서버 측 코드는 JAVA이며 다음 단계를 따르십시오.
1 단계 : urlrewritefilter JAR 다운로드 여기를 클릭 하고 경로를 빌드하여 저장 하십시오. WEB-INF / lib
2 단계 : HTML5 모드 활성화 $ locationProvider.html5Mode (true);
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 / 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>
나는이 간단한 해결책과 그 작품을 가지고있다.
앱 / 예외 /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);
}
node.js 파일에 아래 코드 스 니펫을 추가하여 문제를 해결했습니다.
app.get("/*", function (request, response) {
console.log('Unknown API called');
response.redirect('/#' + request.url);
});
참고 : 페이지를 새로 고치면 URL에 # 태그가 없기 때문에 Angular 페이지 대신 API를 찾습니다. 위의 코드를 사용하여 #을 사용하여 URL로 리디렉션합니다.
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('!');
}
'IT story' 카테고리의 다른 글
| '&'를 '&'로 인코딩해야합니까? (0) | 2020.05.12 |
|---|---|
| 세로 탭이란 무엇입니까? (0) | 2020.05.12 |
| Java에서 2 개의 XML 문서를 비교하는 가장 좋은 방법 (0) | 2020.05.12 |
| 목록에서 정수를 올바르게 제거 (0) | 2020.05.12 |
| CLI를 사용하여 구성 요소를 삭제하는 가장 좋은 방법은 무엇입니까 (0) | 2020.05.12 |