react 설정 서버 에이전트

다음은 서버 에이전트에 대한 저의 요약입니다. 오류가 있으면 지적해 주십시오.
서버 프록시란 브라우저에 방해가 되는 동원 정책이다. 도메인 이름, 프로토콜 또는 포트 번호가 같지 않으면 서로 다른 원본이다. 방문할 때 크로스 필드 문제가 발생한다. 그러면 브라우저 사이에 크로스 필드가 있지만 서버 사이에 크로스 필드가 존재하지 않기 때문에 우리는 서버에 요청을 보내준다. 즉, 서버 프록시이다. 크로스 필드는 CORS, 서버 프록시 등 방식으로 해결할 수 있다.여기서react의 서버 프록시를 설명합니다.

1. 패키지에서.json 구성

"proxy":"https://baidu.com",

실행 가능, 이 방식을 통해 서버 프록시를 실현할 수 있지만, 우리가 여러 개의 프록시를 설정해야 할 때, 아래의 그림은

"proxy":{
	"/aaa":{
		"target":"https://www.baidu.com",
		"changeOrigin":"true"
		},
	"/bbb":{
		"target":"https://www.taobao.com",
		"changeOrigin":"true"
		}
}

잘못 보고할 거예요.

When specified, "proxy" in package.json must be a string.
Instead, the type of "proxy" was "object".
Either remove "proxy" from package.json, or make it a string.

이 방법은 대상을 전송할 수 없고 문자열만 전송할 수 있음을 알려 줍니다. 이것은create-react-app의 설정으로create-react-app2.0 이상의 버전에서 이 현상이 발생하기 때문에 이 방법으로 여러 개의 에이전트를 설정하면 안 됩니다.

2.http-proxy-middleware

이것은 글자의 뜻을 보면 분명하다. http 프록시 중간부품은 서버 프록시를 처리하는 데 사용된다. 그러면 우선 설치해야 한다

npm install http-proxy-middleware -S

그리고 src 디렉터리에 setupProxy를 만듭니다.js 파일 설정

//setupProxy.js
const {createProxyMiddleware} = require('http-proxy-middleware')

module.exports = function (app) {
    app.use('/api',    //  
        createProxyMiddleware({
            target: "https://www.baidu.com",   //    
            changeOrigin: true,
            pathRewrite: {
                "^/api": ""   //  ， url 
            }
        }));
}

react 서버 에이전트의 원리는 그 내부의 웹pack-dev-server이다. 요청을 감청하고 지정한 요청을 들으면 목표 주소로 전송한다. 서버 간에 동원 정책이 없기 때문에 이 방법을 통해 크로스오버를 실현한다.
(역전)