nginx 를 사용 하여 개발 과정 에서 의 크로스 필드 문 제 를 해결 합 니 다.

닥 친 문제
vue 전단 프로그램 을 개발 할 때 저 희 는 여러 개의 프로젝트 를 만 들 것 입 니 다. 예 를 들 어 사용자 관 리 는 하나의 응용 프로그램 이 고 시스템 관 리 는 하나의 응용 프로그램 입 니 다. 이렇게 여러 개의 응용 프로그램 은 반드시 여러 개의 포트 를 열 어야 합 니 다. 그러면 문제 가 발생 합 니 다. 저 희 는 로그 인 한 후에 token 을 생 성 합 니 다. 이 token 은 브 라 우 저의 localstorage 에 저장 합 니 다. 그러면 token 은 서로 다른 응용 프로그램 에서 공유 할 수 없습니다.로그 인 후에 다른 응용 프로그램 에서 이 token 을 읽 을 수 있 기 를 바 랍 니 다.
 
해결 방안
우 리 는 nginx 를 사용 하여 이 문 제 를 해결 할 수 있 습 니 다. nginx 의 역방향 에이전트 기능 을 이용 하여 우 리 는 서로 다른 문맥 경 로 를 통 해 서로 다른 응용 프로그램 으로 전송 할 수 있 습 니 다. 그러면 우 리 는 도 메 인 이름 을 통 해 서로 다른 응용 프로그램 에 접근 할 수 있 습 니 다. 그러면 도 메 인 간 의 문 제 는 자 연 스 럽 게 해결 할 수 있 습 니 다.
nginx 프로필 설정 은 다음 과 같 습 니 다.

location /jpaas {
             proxy_set_header Host       $host;
             proxy_pass http://localhost:8002;
        }
        
        location /api/ {
             proxy_set_header Host       $host;
             proxy_pass http://localhost:9900/;
        }

이렇게 해서 저 희 는 방문 / jpaas / 를 통 해 요청 을 전달 합 니 다.http://localhost:8002/jpaas
프 록 시 주의pass 설정, 뒤에 있 는 지 / 
요청http://localhost:port/문맥
하면, 만약, 만약...http://localhost:port 문맥
 
VUE 프로그램 개조
기본 값 은 컨 텍스트 가 없 기 때문에 프로그램 을 수정 해 야 합 니 다.
vue. config. js 수정

const vueConfig = {
  publicPath: "/jpaas",

기본적으로 이게 없어 요. publicPath 의, 우 리 는 하 나 를 추가 합 니 다.
또한 proxy 도 제거 할 수 있 습 니 다:

devServer: {
    // development server port 8000
    port: 8002,
    /*
    proxy: {
      '/api': {
         //target: 'http://139.186.65.108:9900',
         //target: 'http://129.28.157.247:9900',
        target: 'http://localhost:9900',
        pathRewrite: { '^/api': '' },
        ws: false,
        changeOrigin: true
      }
    }*/
  },

이 곳 의 proxy 는 주석 을 달 수 있 습 니 다. 그의 뜻 은 / api 의 요청 을 백 엔 드 의 게 이 트 웨 이 로 전송 하 는 것 입 니 다. 우 리 는 위 에서 nginx 를 통 해 통일 적 으로 처리 하기 때문에 이 걸 로 도 메 인 을 뛰 어 넘 는 문 제 를 처리 할 필요 가 없습니다.
경로 설정 수정

export default new Router({
  mode: 'history',
  base: "/jpaas",
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRouterMap
})

여기에 베이스 가 하나 추가 되 었 습 니 다.
이렇게 해서 우 리 는 하나의 nginx 를 통 해 여러 응용의 크로스 도 메 인 문 제 를 실현 했다.