크로스 도메인 웹팩 개발 환경 튜토리얼 예시

이 글은 주로 vue-cli webpack의 크로스 도메인 개발 환경에 대한 자세한 설명을 소개하고 있어서 편집자가 꽤 좋다고 생각해서 지금부터 공유하고 참고용으로 올려보겠습니다. 편집기를 따라가서 살펴보겠습니다

config/index.js의 dev.proxyTable 옵션을 편집하세요. 개발 서버는 프록시를 위해 http-proxy-middleware를 사용하고 있습니다

교차 문제를 해결하기 위해 -도메인 문제,

1. 보통 Jsonp를 사용하는데, jsonp는 get 요청만 가능합니다.

2. 또는 CORS 지원을 사용하고 Access-Control-Allow-Origin을 설정합니다. *

0개의 필수 기술

vue-loader 및 webpack에 익숙함

1 기본 구성

confix/index.js 파일을 편집합니다. 개발 서버는 http-proxy-middleware를 사용합니다. .

// config/index.js
module.exports = {
 // ...
 dev: {
  proxyTable: {
   // proxy all requests starting with /api to jsonplaceholder
   '/api': {
    target: 'http://jsonplaceholder.typicode.com',
    changeOrigin: true,
    pathRewrite: {
     '^/api': ''
    }
   }
  }
 }
}

위의 예에서는 /api/posts/1 요청을 http://jsonplaceholder.typicode.com/posts/1로 프록시합니다.

2 글로벌 일치

요청이 프록시되어야 하는지 여부를 결정하는 사용자 정의 기능이 될 수 있는 필터 옵션을 제공할 수 있습니다.

라우팅 규칙 및 라우팅 방법을 공식화하는 필터를 제공하세요.

proxyTable: {
 '*': {
  target: 'http://jsonplaceholder.typicode.com',
  filter: function (pathname, req) {
   return pathname.match('^/api') && req.method === 'GET'
  }
 }
}

[관련 추천]

Javascript 무료 동영상 튜토리얼

2. Bootstrap 양식 유효성 검사의 자세한 예

3. JS의 OffsetWidth 버그 및 처리 방법

4. jQuery 상세 설명

5. easyUI 드롭다운 목록 클릭 이벤트 상세 예시

위 내용은 크로스 도메인 웹팩 개발 환경 튜토리얼 예시의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!