vue-cli 프록시 요청 원칙

Vue는 대화형 웹 애플리케이션을 만드는 데 사용할 수 있는 인기 있는 JavaScript 프레임워크입니다. 개발 과정에서 우리는 일반적으로 vue-cli를 사용하여 기본 Vue 프로젝트를 초기화합니다. vue-cli는 Vue에서 공식적으로 제공하는 스캐폴딩 도구로, 프로젝트 초기화, 패키징, 퍼블리싱 등 다양한 편리한 기능을 제공합니다.

그러나 개발 과정에서 도메인 간 요청이라는 문제가 발생할 수 있습니다. 브라우저의 동일 출처 정책으로 인해 프런트엔드 Ajax에서 요청을 보낼 때 동일한 도메인 이름의 서버 리소스만 요청할 수 있고 다른 도메인 이름의 서버 리소스는 요청할 수 없습니다. 이때 vue-cli의 프록시 요청을 통해 이 문제를 해결할 수 있습니다.

그럼 vue-cli의 프록시 요청은 어떻게 구현되나요?

직접 요청과 대리 요청의 차이점

대리 요청의 원리를 이해하기 전에 직접 요청과 대리 요청의 차이점을 먼저 이해해야 합니다. 개발 과정에서 Ajax 요청을 통해 백엔드 서비스에 직접 접근하게 되면 아래 그림과 같이 요청이 프런트엔드에서 백엔드로 직접 전송됩니다.

이 방법에는 크로스 도메인 문제가 포함됩니다. . 백엔드 인터페이스가 도메인 간 응답 헤더를 설정하지 않으면 브라우저는 프런트엔드에서 AJAX 요청을 시작하는 것을 금지하므로 요청이 실패하게 됩니다.

vue-cli에서는 프록시 요청을 통해 이 문제를 해결할 것입니다. 요청 프록시의 기본 아이디어는 요청을 로컬 서버로 보낸 다음 해당 요청을 백엔드 서버로 전달하는 것입니다.

vue.config.js의 프록시 구성

vue-cli 프로젝트에서는 vue.config.js 파일을 구성하여 프록시 요청을 설정할 수 있습니다. 이 파일에서 devServer 옵션을 설정하고 proxy 개체를 설정하여 프록시를 구성할 수 있습니다. 다음은 간단한 예입니다. devServer 选项，通过设置 proxy 对象进行代理配置。下面是一个简单的例子：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    }
  }
}

在上述代理配置中，我们将 /api 路径下的请求都转发到本地的 http://localhost:8080 地址。

其中， changeOrigin 选项用于控制是否需要更改请求头中原始主机名。

proxy 对象中，我们可以设置多个代理地址，例如：

module.exports = {
  devServer: {
    proxy: {
      '/api1': {
        target: 'http://localhost:8081',
        changeOrigin: true
      },
      '/api2': {
        target: 'http://localhost:8082',
        changeOrigin: true
      }
    }
  }
}

这里的 /api1 和 /api2 分别代表要转发的请求路径， target 属性指定了要转发到的服务器地址。

实现原理

在了解了代理请求的配置后，我们来看一下代理请求的实现原理。

首先，当我们在前端发起请求时，请求会先被发送到本地服务器。本地服务器接收到请求后，会对请求进行一系列处理，包括修改请求头、修改请求路径等。然后，将处理过的请求转发至后端服务器上。

流程图如下：

需要注意的是，在本地服务器中，我们需要设置代理中间件，例如 http-proxy-middlewarerrreee

위 프록시 구성에서는 /api 경로 아래의 모든 요청을 로컬 http://localhost:8080 주소로 전달합니다. .

그 중 changeOrigin 옵션은 요청 헤더의 원래 호스트 이름을 변경해야 하는지 여부를 제어하는 ​​데 사용됩니다.

프록시 개체에서 여러 프록시 주소를 설정할 수 있습니다. 예: 🎜rrreee🎜여기에서 /api1 및 /api2는 각각 전달될 요청 경로를 나타냅니다. target 속성은 전달할 서버 주소를 지정합니다. 🎜🎜구현 원리🎜🎜프록시 요청 구성을 이해한 후, 프록시 요청 구현 원칙을 살펴보겠습니다. 🎜🎜먼저 프런트 엔드에서 요청을 시작하면 요청이 먼저 로컬 서버로 전송됩니다. 로컬 서버는 요청을 받은 후 요청 헤더 수정, 요청 경로 수정 등을 포함하여 요청에 대한 일련의 처리를 수행합니다. 처리된 요청은 백엔드 서버로 전달됩니다. 🎜🎜흐름도는 다음과 같습니다. 🎜🎜🎜🎜로컬 서버에서는 http-proxy-middleware와 같은 프록시 미들웨어를 설정해야 합니다. 프록시 미들웨어는 응답 요청과 유사한 인터셉터로, 요청 프로세스를 제어하고 요청 내용을 수정하는 데 사용됩니다. 프록시 미들웨어를 구성하여 요청의 프록시 전달을 구현할 수 있습니다. 🎜🎜요약🎜🎜위의 소개를 통해 vue-cli의 프록시 요청 원리를 ​​이해했습니다. 프록시 요청은 프런트 엔드에서 도메인 간 문제를 해결하는 방법으로, 요청을 로컬 서버로 전달한 다음 로컬 서버에서 백엔드 서버로 요청을 전달하여 도메인 간 요청의 효과를 얻습니다. vue-cli에서는 프런트 엔드에서 도메인 간 요청을 수행하도록 vue.config.js 파일을 구성하여 프록시 요청을 설정할 수 있습니다. 🎜

위 내용은 vue-cli 프록시 요청 원칙의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!