nginx가 도메인 간 문제를 해결하는 방법

Nginx를 사용하여 프런트 엔드 도메인 간 문제를 해결하는 방법은 무엇입니까?

머리말

정적 페이지, Vue와 같은 애플리케이션을 개발할 때 우리는 종종 일부 인터페이스를 호출합니다. 이러한 인터페이스는 교차 도메인일 가능성이 높으며, 그러면 브라우저는 교차 출처 문제를 보고하고 이를 조정하지 않습니다.

가장 간단한 해결책은 보안 문제를 무시하도록 브라우저를 설정하고 --disable-web-security를 설정하는 것입니다. 다만, 이 방법은 PC 페이지 개발에서는 괜찮지만, 모바일 페이지에서는 작동하지 않습니다.

Solution

Nginx를 사용하여 요청을 전달하세요. 교차 도메인 인터페이스를 로컬 도메인의 인터페이스로 작성한 다음 이러한 인터페이스를 실제 요청 주소로 전달합니다.

예를 들어

예를 들어 Vue 애플리케이션을 개발 중입니다.

원본:

디버깅 페이지: http://192.168.1.100:8080/

요청된 인터페이스: http://ni.hao.sao/api/get/info

1단계 :

요청된 인터페이스는 다음과 같습니다: http://192.168.1.100:8080/api/get/info

PS: 이는 도메인 간 문제를 해결합니다.

2단계:

Nginx를 설치한 후 /usr/local/etc/nginx/ 디렉터리(Mac용)로 이동하여 nginx.conf 파일을 수정합니다.

3단계:

기본 서버 구성을 주석 처리합니다.

아래 추가:

server{ listen 8888; server_name 192.168.1.100; location /{ proxy_pass http://192.168.1.100:8080; } location /api{ proxy_pass http://ni.hao.sao/api; } }

저장 후 Nginx를 시작하세요.

PS: Nginx 구성에 대해 많이 알 필요는 없으며 매우 간단합니다.

4단계:

방문: http://192.168.1.100:8888/

완료되었습니다.

PS: 액세스한 포트는 '8888'입니다. 다른 도메인의 주소가 있는 경우 계속해서 위치를 추가하세요.

오류 시연

처음에는 Nginx의 구성을 잘 이해하지 못해서 다음과 같이 구성해도 될 것 같았습니다.

server{ listen 8080; server_name 192.168.1.100; location /api{ proxy_pass http://ni.hao.sao/api; } }

제가 이 글을 쓰는 이유는 Nginx가 8080 요청을 모니터링하고 일치하는 요청만 전달하는 데 도움이 될 것이라고 생각하기 때문입니다. 내가 깨닫지 못한 것은 Nginx가 이 글을 작성한 후에 포트 8080을 점유해야 한다는 것입니다.

포트를 점유해야 하므로 동일한 프로토콜을 사용하는 다른 프로세스가 더 이상 점유할 수 없으며, 이로 인해 포트 8080에서 개발된 페이지를 활성화할 수 없습니다. 동료가 언급한 후 이 문제가 생각나서 마음을 바꿔서 최고의 방법을 생각해냈습니다.

요약

실제로 개발 및 디버깅 중에뿐만 아니라 프로덕션 환경에서도 이 작업을 수행할 수 있습니다. Nginx를 사용하여 요청을 전달한 후에는 배포할 정적 페이지를 요청 인터페이스와 동일한 도메인에 배치할 필요가 없습니다.

Appendix

요청에서 문제를 발견하고 Nginx에서 보고한 오류인 경우 Nginx의 error.log만 찾아보면 그 이유를 알 수 있습니다.

전제 조건은 nginx.conf에서 error.log를 구성하는 것입니다:

error_log logs/error.log;

Mac의 error.log 위치:

/usr/local/Cellar/nginx/1.15.8/logs/error.log

더 많은 Nginx 관련 지식을 보려면Nginx 사용 튜토리얼칼럼을 방문하세요!

위 내용은 nginx가 도메인 간 문제를 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!