React 프 록 시 2 가지 실 용적 인 방법

프 록 시 를 여 는 두 가지 방식
react 는 봉 인 된 aax 가 요청 한 코드 를 우리 가 직접 사용 할 수 있 도록 제공 하지 않 았 습 니 다.상호작용 을 할 때,우 리 는 스스로 aax 코드 를 봉 하거나 제3자 aax 라 이브 러 리 를 사용 해 야 합 니 다.일반적으로 우 리 는axios(경량급)를 사용 합 니 다.
먼저 대리 가 왜 필요 한 지 말씀 해 주 시 겠 어 요?
예 를 들 어 로 컬 에서 포트 가 5000 인 서버 를 쓸 때 포트 3000 을 통 해 요청 이 발생 하면 도 메 인 을 뛰 어 넘 는 문제(원래 3000 포트 의 ajax 엔진 이 응답 을 차단 했다)가 발생 할 수 있 습 니 다.이 때 프 록 시 를 통 해 문 제 를 해결 할 수 있 습 니 다.프 록 시 란 정 보 를 전달 하 는 도구 입 니 다.포트 는 3000 의 요청 으로 3000 포트 에 있 는 프 록 시 에 게 보 내 고 프 록 시 는 5000 포트 에 있 는 서버 에 전달 합 니 다.응답 할 때 프 록 시 는 ajax 엔진 이 없 는 프 록 시 이기 때문에 응답 을 받 을 수 있 고 3000 포트 에 있 는 비계 에 전달 하여 도 메 인 을 뛰 어 넘 는 문 제 를 해결 할 수 있 습 니 다.
react 프 록 시 를 여 는 두 가지 방식
방법 1
package.json 파일 에"proxy"를 추가 합 니 다."https://localhost:5000"설정 후 3000 포트 에 없 는 자원 은 포트 5000 으로 찾 습 니 다."포트 5000 에 있 는 서버 에 보 내 는 요청 을 3000 으로 전달 하 겠 다 는 것 이다.하지만 요청 한 물건 이 포트 3000 에 있 으 면 포트 5000 에 전송 되 지 않 는 다.
이 방법 은 하나만 찾 을 수 있 습 니 다.하지만 포트 5000 에서 만 찾 는 것 이 아니 라 다른 포트 번호 에서 찾 으 려 면 다음 방법 을 사용 해 야 합 니 다.
방법 2
src 에 setupProxy 파일 을 추가 합 니 다(react 비계 에서 이 파일 을 찾 을 수 있 습 니 다).다음 코드 를 복사 합 니 다.
설정 후 이전에 요청 한 주소 localhost:3000 에/api 1 을 추가 해 야 합 니 다.3000 포트 에서 요청 에 필요 한 자원 을 찾 지 못 하면 api 1 이 설정 한 프 록 시 로 가서 포트 5000 에 접근 하 라 고 합 니 다.여러 프 록 시 를 설정 하려 면 쉼표 로 분리 하면 됩 니 다.
changeOrigin 은 서버 가 받 은 응답 헤더 의 Host 필드 값 을 제어 하 는 데 사 용 됩 니 다.이 곳 에서 기본 값 이 false 라면 서버 는 이 요청 이 포트 에서 3000 이 라 고 생각 합 니 다.그러나 이 값 을 true 로 설정 하면 서버 는 이 요청 이 포트 5000 에서 왔 다 고 생각 합 니 다(사실은 그렇지 않 습 니 다).이것 은 쓰 지 않 아 도 되 지만 쓰 는 것 이 가장 좋다.
pathWrite 에서 요청 경 로 를 다시 썼 습 니 다.사실은 처음에/api 를 통 해 이 대 리 를 찾 았 지만 에이전트 가 포트 5000 에 요청 할 때/api 를 제거 해 야 합 니 다.예 를 들 어https://localhost:3000/api/studentapi 를 제거 하지 않 으 면 요청 주 소 는/api/students 에 해당 하지만 실제로 우리 가 요청 할 주 소 는/student 일 것 입 니 다.

const proxy = require('http-proxy-middleware');
​
module.exports = function (app) {
    app.use(
        proxy('/api1', {
            target: 'http://localhost:5000',  
            changeOrigin: true,      //     false
            pathRewrite: { '^/api1': '' }  
        }),
        proxy('/api2', {
            target: 'http://localhost:5001',
            changeOrigin: true,      //     false
            pathRewrite: { '^/api2': '' }
        }),
    )
}

총결산
여기 서 React 가 대 리 를 여 는 두 가지 방식 에 관 한 글 은 여기까지 소개 되 었 습 니 다.더 많은 React 가 대 리 를 여 는 방식 에 관 한 내용 은 예전 의 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 저 희 를 많이 사랑 해 주세요!