Nginx 404 오류를 해결하는 방법

최근 프로젝트 디플로이를 하다가 사진과 같은 문제가 발생했습니다

일반 로그인 인터페이스로는 접근이 가능하지만, 로그인 후 접속 후 주소에서 404에러가 발생한다고 해서 확인하러 갔습니다. 구성 오류가 있었지만 확인 결과 nginx.conf 및 config.js 두 구성 파일의 IP와 포트가 올바른 것으로 나타났습니다.

이 프로젝트는 여러 번 배포되었으며 이러한 오류는 없습니다. 발생했습니다.

이것은 손길이 닿지 않은 원래의 압축 해제된 nginx.conf 소스 파일입니다.

원으로 표시된 영역은 프로젝트 구성에 따라 구성되어야 하는 ip 및 청취 포트

listen에 해당합니다. 포트, server_name은 액세스한 ip

에 해당합니다. 하지만 문제가 해결되지는 않습니다. 다음 문장을 추가해야 합니다.

try_files $uri $uri/ /index.html;

에 추가합니다. server 아래의 location 섹션에 nginx.exe가 있는 디렉터리에서 cmd

이전에 nginx 서비스를 종료한 적이 없다면 중지한 후 다시 엽니다. 종료된 경우 직접 명령을 입력하여 서비스를 시작할 수 있습니다.

nginx 서비스 중지 명령:

nginx -s stop

nginx 서비스 시작 명령:

start nginx

핫 배포 nignx 서비스 명령:

(그러나 이 명령을 사용하는 것은 권장되지 않습니다. 때때로 이 명령이 작동하지 않을 경우 직접 중지하고 시작하는 것이 좋습니다)

nginx -s reload

캐시를 지운 후, 다시 테스트하세요

Ctrl+Shift+Del

다시 테스트하면 정상적으로 액세스할 수 있습니다

http:10.10.10.10/test/test/test와 같은 다른 기능을 입력하고 페이지를 새로 고치면 404가 나타납니다. nginx 구성에 리디렉션 점프를 추가하지 않았기 때문에 페이지를 새로 고칩니다.

해결책은 다음 구성을 추가하는 것입니다. try_files $uri $uri/ /index.html;

server {
    listen 80;
    server_name 127.0.0.1;
	
	location / {
		root /data/htdocs/FactoryModel/micro-front-end/industrial-internet-platform-main-vue;
		index index.php index.html index.htm;
		# add_header Cache-Control;
		add_header Access-Control-Allow-Origin *;
		if ( $request_uri ~* ^.+.(js|css|jpg|png|gif|tif|dpg|jpeg|eot|svg|ttf|woff|json|mp4|rmvb|rm|wmv|avi|3gp)$ ){
		  add_header Cache-Control max-age=7776000;
		  add_header Access-Control-Allow-Origin *;
		}
		try_files $uri $uri/ /index.html;
	}
}

이 구성은 URL 경로와 일치할 때 해당 정적 리소스를 찾을 수 없을 때마다 변조가 Go를 점프한다는 것을 의미합니다. index.html 파일에

표시된 대로 여기에 추가하세요

다음 콘텐츠에는 라우터 라우팅의 작동 원리와 nginx 원리에 대한 약간의 지식이 필요합니다

이런 일이 발생하는 이유에 대한 분석(기록 모드에서 라우팅의 경우):

먼저 질문하세요:

2. 점프를 클릭할 때 왜 발생합니까?

이 때, index.html 파일로 다시 리디렉션되도록 try_files를 구성합니다. 즉, 홈 페이지 "/"로 돌아갑니다. 이때 페이지가 새로 고쳐졌습니다. vue-router 라우팅이 적용됩니다. 현재 URL 주소에 따라 컴포넌트가 일치하므로 이때 해당 컴포넌트는 URL이고 페이지가 다시 로드되면 완료됩니다.

2. 두 번째 질문은 클릭하면 가끔 점프하지만 가끔은 점프하지 않는 이유입니다. 점프에는 두 가지 상황이 있다는 것을 알아야 합니다. 하나는 페이지가 새로 고쳐지는 것이고(첫 번째 질문에 속함), 다른 하나는 페이지가 새로 고쳐지는 것입니다. 새로고침되지 않습니다. 이는 코드 작성 방법에 따라 다릅니다.

2. 전달하면 페이지가 새로 고쳐지며 이는 a 태그와 동일합니다

클릭하여 점프할 때 코드에서 Push를 사용하는 경우가 있습니다. (새로 고침 없음), 때로는 링크(새로 고침) 태그를 사용하면 이 문제가 발생합니다.

위 내용은 Nginx 404 오류를 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!