nginx 크로스 필드 문 제 를 해결 하 는 인 스 턴 스 방법

앞 뒤 가 분리 되 어 nginx 를 사용 하여 도 메 인 문 제 를 해결 합 니 다.
전단: vue. js + nodejs + webpack
배경: SpringBoot
역방향 프 록 시 서버: nginx
사상: 전단 코드 를 포장 하여 nginx 가 정적 자원 을 가리 키 게 하고 nginx 가 배경 요청 을 전송 합 니 다.
1. 전단 코드 포장:

npm run build

dist 폴 더 가 생 성 됩 니 다.index. html 파일 과 static 폴 더 를 포함 합 니 다. 경 로 는 제 로 컬 을 예 로 들 면:
/Users/xxx/ideaProjects/webtest/dist
2. 열기
/ usr / local / etc / nginx 디 렉 터 리 에 있 는 nginx. conf 는 server 에 다음 과 같이 추가 합 니 다.

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/;#       

  }

테스트
전단 전송 요청:http://localhost/test vue - routerhttp://localhost/api/demo/1실제 방문http://localhost:8080/demo/1。
직접 배경 으로 요청 보 내기: 접근http://localhost/api/demo/1실제 방문 은:http://localhost:8080/demo/1
내용 확장 사고:
1). \ # 프 록 시 서버 인터페이스

location /api/ {
proxy_pass http://localhost:8080/;#       
}

프 록 시 인터페이스 주 소 는 8080 에 불과 합 니 다. 그러면 그 는 배경 항목 의 이름 을 자동 으로 추가 합 니까??인터페이스http://148.70.110.87:8080/프로젝트 이름 / 방법 이름...
2). js 에서 이렇게 요 청 했 습 니 다. nginx 는 위의 설정 에 따라 요 청 했 지만 오류 가 발생 했 습 니 다.http://148.70.110.87/api/index2 404 (Not Found)

axios.post('/api/index2')
.then( (response) =>{
console.log(response);
})
.catch( (error)=> {
console.log(error);
});

3). 당신 의 세 번 째 단계, 테스트, 정말 이해 할 수 없습니다. 관련 코드 가 있 었 으 면 좋 겠 습 니 다.