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

프런트엔드와 백엔드 분리, nginx를 사용하여 도메인 간 문제 해결

Front -end: vue.js+nodejs+ webpack

Backend: SpringBoot

역방향 프록시 서버: nginx

Idea: 전면 패키지 -end 코드를 사용하고 nginx가 정적 리소스를 가리키도록 하면 nginx는 백그라운드 요청을 전달합니다.

1. 프런트 엔드 코드를 패키지합니다.

npm run build

은 dist 폴더를 생성합니다. index.html 파일과 정적 폴더가 포함되어 있습니다. 내 로컬 경로를 예로 들어 보겠습니다.

/Users/xxx/ideaProjects/webtest/dist

2. 🎜#

nginx.conf /usr/local/etc/nginx 디렉토리에서 서버에 다음을 추가합니다:

listen       80; #原为8080，避免冲突，更改为80
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;


        location / {
            root   /Users/xxx/ideaProjects/webtest/dist;
            index  index.html;
            
            # 此处用于处理 Vue、Angular、React 使用H5 的 History时 重写的问题
            if (!-e $request_filename) {
                rewrite ^(.*) /index.html last;
                break;
            }
        }


        # 代理服务端接口
        location /api/ {
            proxy_pass http://localhost:8080/;# 代理接口地址
        }

test # 🎜🎜#프런트엔드는 요청을 보냅니다: http://localhost/test, vue-router는 이를 http://localhost/api/demo/1로 리디렉션하고 실제 액세스는 http://localhost:8080/입니다. 데모/1.

백그라운드로 직접 요청 보내기: http://localhost/api/demo/1을 방문하세요. 실제 방문은 http://localhost:8080/demo/1

#입니다. 🎜🎜# 더 많은 Nginx 관련 기술 기사를 보려면

Nginx 사용 튜토리얼

열을 방문하여 알아보세요!

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