vue2.0 크로스 도메인 프록시를 해결하는 방법

프론트엔드와 백엔드가 분리된 개발 모델에서 프론트엔드는 대개 Ajax를 통해 백그라운드 인터페이스를 요청하여 데이터를 얻습니다. 그러나 동일 출처 정책의 제한으로 인해 프런트엔드는 동일한 도메인 이름의 인터페이스만 요청할 수 있으며 다른 도메인 이름의 인터페이스는 직접 요청할 수 없습니다. 이것이 소위 크로스 도메인 문제입니다.

교차 도메인 문제를 해결하기 위해 교차 도메인 프록시 기술을 사용할 수 있습니다. Vue2.0에서는 webpack의 ProxyTable을 구성하여 크로스 도메인 프록시를 구현할 수 있습니다. 아래에서는 Vue2.0에서 도메인 간 프록시를 구성하는 방법을 자세히 소개합니다.

1. http-proxy-middleware 설치

http-proxy-middleware는 요청 프록시를 대상 서버로 전달하여 도메인 간 요청을 수행할 수 있는 Node.js 프록시 미들웨어입니다. 먼저 http-proxy-middleware를 설치해야 합니다.

npm install http-proxy-middleware --save-dev

2. ProxyTable 구성

Vue2.0 프로젝트에서 webpack 구성 파일은 일반적으로 프로젝트 루트 디렉터리의 config/index.js 파일에 있습니다. 이 파일에서 ProxyTable을 구성해야 합니다.

dev: {
  // ...
  proxyTable: {
    '/api': {
      target: 'http://127.0.0.1:3000', // 目标服务器地址
      changeOrigin: true,  // 是否改变请求源
      pathRewrite: {
        '^/api': ''  // 路径重写
      }
    }
  }
},

위 코드에서는 /api로 시작하는 요청을 지정된 대상 서버로 프록시하도록 프록시 규칙을 구성합니다. 요청된 URL이 /api/user인 경우 http://127.0.0.1:3000/user 인터페이스로 프록시됩니다. ChangeOrigin은 요청 헤더의 호스트 필드를 설정하는 데 사용되고, pathRewrite는 경로를 다시 작성하고 /api 접두사를 제거하는 데 사용됩니다.

3. package.json 구성

package.json 파일에 다음 코드를 추가해야 합니다.

"scripts": {
  "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
  "start": "npm run dev"
},

이를 통해 npm run dev 명령을 사용하여 개발 서버를 시작할 수 있으며 프록시 규칙은 다음과 같습니다. 자동으로 로드되어 사용됩니다.

4. Vue 파일에서 프록시 사용

도메인 간 요청을 사용해야 하는 Vue 단일 파일 구성 요소에서는 아래와 같이 프록시 규칙에 정의된 /api 접두사를 직접 사용하여 데이터를 요청할 수 있습니다.

// 请求当前登录用户信息
axios.get('/api/user').then(response => {
  this.user = response.data
}).catch(error => {
  console.log(error)
})

위 Vue2.0에서 도메인 간 프록시를 구성하는 자세한 단계는 다음과 같습니다. 프록시 규칙을 사용하면 개발 환경에서 다른 도메인 이름으로 인터페이스를 성공적으로 요청할 수 있으므로 프런트엔드와 백엔드의 공동 개발이 용이해집니다.

위 내용은 vue2.0 크로스 도메인 프록시를 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!