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

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