웹팩을 사용하여 도메인 간 요청을 처리하는 방법

이번에는 webpack을 사용하여 크로스 도메인 요청을 처리하는 방법과 webpack을 사용하여 크로스 도메인 요청을 처리할 때 주의할 점에 대해 설명하겠습니다. 다음은 실제 사례입니다.

프런트 엔드 디버깅 중에 교차 도메인은 항상 골치 아픈 문제였습니다. 이전 기사에서는 교차 도메인 문제에 대한 해결책과 몇 가지 가능한 방법을 논의했습니다.

JSONP를 사용하려면 우선 수정해야 할 부분이 많고, 일반적인 프론트엔드 개발 트렌드와도 맞지 않습니다. CORS를 사용한다면 application/json 유형이 없습니다. 그리고 더 중요한 것은 이는 온라인 상태가 된 이후가 아니라 프런트엔드 디버깅 중에만 요구되는 것이므로 백엔드에 너무 많은 침입을 가하는 것은 좋지 않습니다.

그래서 갑자기 생각이 떠올랐습니다. 에이전트에 합류하면 이 문제가 해결되지 않을까요? 그런데 생각해보니 글을 쓰는 게 꽤 번거로워서 일단 보류했습니다.

며칠 전까지 Stone은 webpack-dev-server가 이미 이를 고려했고 이를 구현하는 데 도움을 주었다고 언급했습니다.

그래서 Vue 프로젝트에서 테스트해 본 결과 로컬 서버를 핫로드할 수 있을 뿐만 아니라 도메인 간에 원격 API를 직접 호출할 수 있어 이전에 겪었던 모든 문제를 완벽하게 해결했다는 사실을 발견했습니다.

다음으로 단계를 간략하게 소개하겠습니다(Vue 스캐폴딩으로 구축된 webpack 프로젝트를 예로 들어):

먼저 build/webpack.dev.conf.js에 이 구성 항목이

proxy: config.dev.proxyTable,

있는지 확인하세요. 주석 처리되었습니다. 주석을 열어주세요. 그렇지 않은 경우 devServer 객체에 추가하세요

그런 다음 config/index.js의 dev 객체에 ProxyTable 구성 항목을 추가하세요.

proxyTable: {
   '/**': {
    target: 'http://api.xxx.com',
    changeOrigin: true,
    secure: false
   }
  },

앞에 있는 키 /**는 다음을 의미합니다. 모든 요청을 프록시합니다. 특정 요청의 경우 이를 /api와 같은 문자열로 변경할 수 있습니다.

뒤에 있는 대상은 프록시될 웹사이트입니다.changeOrigin은 http 요청의 Origin 필드를 변경하는 것을 의미합니다. 브라우저는 백엔드 응답을 받으면 이것이 로컬 요청이라고 생각하고 백엔드에서는 end 상대방은 사이트 내 호출이라고 생각하게 됩니다.

이렇게 간단한 구성을 통해 크로스 도메인 문제가 완벽하게 해결되었습니다.

이후

npm run dev

를 직접 실행하면 테스트 프론트엔드의 ajax 요청을 백엔드 서버로 프록시하여 테스트할 수 있습니다!

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

Js를 사용하여 Promise 라이브러리 구현

React로 이미지를 자르는 방법

위 내용은 웹팩을 사용하여 도메인 간 요청을 처리하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!