vue 프로젝트는 개발 서버 구성 server.proxy(교차 도메인 구성 포함)에 대한 간략한 소개인 vite 도구를 사용합니다.

개요

        어떤 스캐폴딩을 사용하든 프록시를 구성하는 것은 피할 수 없는 주제입니다. server.proxy는  개발 서버에 대한 사용자 정의 프록시 규칙을 구성합니다. 개체를 받을 것으로 예상됩니다  { key: options } . 키 값이  로 시작하면 로 해석됩니다  .  프록시 인스턴스에 액세스하는 데 사용할 수 있습니다. 공식 홈페이지 주소 ^RegExpconfigure

http-proxy 의 보다 자세한 구성 

관련 구성

vue3 프로젝트 에서 vite.config.ts 파일을 찾아  그 안에 vite를 구성합니다. 다음은 옵션  작성 방법( 크로스 도메인 문제를 해결할 수 있음 ) 을 보여줍니다.

server: {
    port: 8080,
    proxy: {
      "/api": {
        target: "http://localhost:7001", // 所要代理的目标地址
        changeOrigin: true,  //允许跨域
        ws: true,  // 开启 websockets 代理
        secure: false, // 验证 SSL 证书
        rewrite: (path) => path.replace(/^\/api/, ""),  // 重写传过来的path路径
      },
    },
  },

간략한 설명

        프런트 엔드 크로스 도메인 문제는 실제로 보안 문제로, 서로 다른 도메인 이름의 서비스가 서로 액세스하지 못하게 하여 악성 프로그램이 백엔드 리소스를 불법적으로 획득하는 것을 방지합니다. 개발 중에 프록시를 사용하여 요청을 프록시하고 도메인 이름을 동일하게 변경하여 교차 문제를 피할 수 있습니다.

위에서 구성한 백엔드 주소는 http://localhost:7001이고   /api로 시작하는 모든 API 요청을 프록시 하고 http://localhost:7001 로 전달합니다.

예:  프런트 엔드 요청 주소는 일반적으로   /api/user 로 축약되며 실제 프런트 엔드 요청 주소는  http://localhost:7001/api/user 입니다.

실제로 백엔드로 전달되는 주소는 http://localhost:7001/user 인  /api를 생략 합니다.

---

동시에 여러 주소를 프록시할 수도 있습니다. 예를 들어

server: {
   proxy: {
      "/api": {
        target: "http://localhost:7001",
        changeOrigin: true,
      },
       "foo": {
          target: "http://localhost:7002",
          changeOrigin: true,
        }
    },
  },

---

알아채다

vite.config.ts를 구성한  후 프로젝트를 다시 시작해야 합니다. 그렇지 않으면 적용되지 않습니다.

---

기사에 오류가 있으면 모두에게 질문을 해주시면 정말 감사하겠습니다. 이해가 안가시면 댓글 달아주시면 하나씩 답변드리겠습니다.

글이 모두에게 도움이 된다면 좋아요와 격려 부탁드립니다 앞으로 함께 열심히 하겠습니다.