도메인 간 문제를 해결하기 위해 http-proxy를 사용하는 webpack-dev-server에 대한 자세한 설명

이 글은 webpack-dev-server가 어떻게 http-proxy를 사용하여 크로스 도메인 문제를 해결하는지에 대한 자세한 설명을 주로 소개합니다. 편집자는 꽤 좋다고 생각해서 지금 공유하고 참고용으로 제공하겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

문서 정보

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

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

http-proxy-middleware에서도 마찬가지입니다. webpack-dev-server의 구현 방법은 실제로 webpack 구성 파일에서 http-proxy

를 구성하는 this

을 캡슐화한 것입니다( 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 인터페이스

편의를 위해 다음이 캡슐화됩니다. jquery Ajax 함수 데모 사용

$.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'

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

2. 단, 리디렉션을 위해 http-proxy를 사용합니다. 이 경우 url: '/test/testFetch/Login.php'는 url: 'http://localhost/test/testFetch'와 동일합니다. /Login.php'

changeOrigin

1. true/false, 기본값: false - 호스트 헤더의 원본을 대상 URL로 변경합니다

2. 로컬 가상 서버가 요청을 받아 보냅니다. 당신을 대신해서 이 요청 - 다른 사람들이 하는 말입니다

3. 해봤는데, 이 매개변수를 false로 설정해도 괜찮은 경우도 있는데, 구체적인 이유는 알 수 없으므로 true로 설정하는 것이 좋습니다.

secure

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

pathRewrite

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

2. Object-keys는 경로 일치를 위해 RegExp로 사용됩니다.

3. 제 생각엔 '^/api'가 ''로 대체된 것 같습니다. 좋지 않음)

Fetch API를 사용하기 위한 코드가 첨부되어 있습니다

위 코드는 "Calling Interface"

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对象

에서 $.ajax()를 사용하는 것과 동일한 효과가 있습니다.

vue2.0의 ProxyTable 설정 정보 교차 도메인 요청에 axios 사용

php를 사용하여 프록시 인스턴스 코드 감지

Python 크롤러가 프록시 프록시를 사용하여 웹 페이지를 크롤링하는 방법에 대한 자세한 설명

위 내용은 도메인 간 문제를 해결하기 위해 http-proxy를 사용하는 webpack-dev-server에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!