webpack-dev-server에서 http-proxy를 사용하는 방법(자세한 튜토리얼)

이 글은 크로스 도메인 문제를 해결하기 위해 webpack-dev-server의 http-proxy 사용에 대한 자세한 설명을 주로 소개하고 참고 자료를 제공합니다.

문서 정보

프록시를 활성화하기 위한 webpack-dev-server에 대한 webpack의 공식 소개

Vue-cli ProxyTable은 개발 환경의 도메인 간 문제를 해결합니다. 이 문서는 vue용으로 작성되었지만 webpack에서 사용됩니다. dev- 서버

http-proxy-middleware에서도 마찬가지입니다. webpack-dev-server의 구현 방법은 실제로 이것을 캡슐화한 것입니다

웹팩 구성 파일(webpack. config.js)

module.exports = {
 ...此处省略一万字

 // webpack-dev-server的配置
 devServer: {
 historyApiFallback: true,
 hot: true,
 inline: true,
 progress: true,
 port: 3000,
 host: '10.0.0.9',
 proxy: {
 '/test/*': {
 target: 'http://localhost',
 changeOrigin: true,
 secure: false
 }
 }
 },

 ...此处省略一万字
};

구성 위 구성에서 http-proxy에 대한 유일한 것은 프록시의 값입니다: {...}

Call 인터페이스

편의상 다음은 캡슐화된 ajax 함수를 사용합니다. 데모용 jquery 작성

$.ajax({
 // url: 'http://10.0.0.9:3000/test/testFetch/Login.php', // 这样不行
 url: '/test/testFetch/Login.php', // 这样行
 type: 'post',
 data: {
 app_id: '13751313169',
 password: '123456',
 user_name: 'Nicholas'
 },
 success: function(data) {
 console.log(data);
 }
});

proxy

'/test/*' 및 대상의 매개변수 설명 부분: 'http://localhost'

이름에서 볼 수 있듯이 이는 실제로 '/와 일치합니다. test/*' 형식의 API 도메인 이름 리디렉션은 'http://localhost'

위의 "호출 인터페이스"와 결합하면 url: '/test/testFetch/'라는 문장을 볼 수 있습니다. Login.php'는 실제로 자동으로 추가됩니다. 즉, url: '/test/testFetch/Login.php'는 url: 'http://10.0.0.9:3000/test/testFetch/Login.php'와 동일합니다. '

1. 그러나 우리는 리디렉션에 http-proxy를 사용합니다. 이 경우 url: '/test/testFetch/Login.php'는 url: 'http://localhost/test/testFetch/Login'과 동일합니다. .php'
changeOrigin

true/false, 기본값: false - 호스트 헤더의 출처를 대상 URL

1. 로 변경합니다. 로컬 가상 서버가 요청을 받고 요청을 보냅니다. 여러분을 대신해서 - 다른 사람들이 하는 말입니다

2. 해봤는데, 이 매개변수를 false로 설정해도 경우에 따라서는 구체적인 이유를 알 수 없으므로 true로 설정하는 것이 좋습니다
secure

true/false, SSL 인증서를 확인하려는 경우

pathRewrite

예: pathRewrite: {'^/api': ''}

1. 객체 -keys는 경로를 일치시키기 위해 RegExp로 사용됩니다

2. 여기서 '^/api'가 ''로 대체된 것 같습니다(그냥 내 추측일 뿐, 작동하지 않았는데, 아마도 내 정규 표현식이 좋지 않기 때문일 것입니다). 글)
첨부된 것은 Fetch API를 사용하기 위한 코드

위 코드는 "Calling Interface"에서 $.ajax()를 사용한 것과 같은 효과가 있습니다.

let testAsync = async function () {
 var feeling = {
 app_id: '13751313169',
 password: '123456',
 user_name: 'Nicholas'
 };

 var fetchParams = {
 method: 'post',
 headers: {
 'Accept': 'application/json',
 'Content-Type': 'application/json'
 },
 credentials: 'include', // 将凭证也带上（例如cookies）
 body: JSON.stringify(feeling),
 };

 let temp = await fetch('/test/testFetch/Login.php', fetchParams).then(response => response.text());

 console.log(temp); // 这个就是一个json对象

 return temp;
};

let data = testAsync(); // async函数返回值是一个Promise对象

console.log(data); // 这个是一个Promise对象

위는 제가 모두를 위해 컴파일한 것입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

VueJs에서 window.resize를 모니터링하는 방법과 이를 구체적으로 구현하는 방법은 무엇입니까?

AngularJS

React-native 브리지 Android를 구현하는 방법과 구체적인 단계는 무엇입니까?

Vue에서 사용자 정의 명령 지시문을 개발하는 방법

Vue에서 사용자 정의 명령 지시문을 개발하는 방법

layui 상위-하위 창에서 매개변수를 전달하는 방법에 대한 자세한 해석

이미지를 구현하는 방법 WeChat 애플릿 구성 요소 이미지의 적응형 표시

위 내용은 webpack-dev-server에서 http-proxy를 사용하는 방법(자세한 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!