source

지정 시 패키지에 "프록시"가 있습니다.json은 문자열이어야 합니다.

manysource 2023. 3. 11. 09:14

지정 시 패키지에 "프록시"가 있습니다.json은 문자열이어야 합니다.

리액트 의뢰인인 내 패키지에 프록시를 넣고 싶다.json 내용:

...
"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "proxy": {
    "/auth/google": {
      "target": "http://localhost:5000"
    }
   },
...

하지만 실행해보니 오류가 발생했습니다.

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

문자열로 변환하려고 했지만 오류는 발생하지 않았지만 프록시가 작동하지 않습니다.

"proxy": "http://localhost:5000"

My App.js

<div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>hey there</p>
          <a href="/auth/google">Sign In With Google</a>
        </header>
      </div>

현재 직면하고 있는 문제는 CRA v2 때문입니다.

우선, 프록시에 플레인스트링만을 사용하고 있는 경우는, 추가의 설정은 필요 없습니다.그러나 개체를 사용하는 순간 고급 구성이 사용됩니다.

따라서 다음 단계를 따라야 합니다.

  1. http-proxy-middleware 를 를 인스톨 ( 「」).npm i --save http-proxy-middleware

  2. 패키지에서 엔트리를 삭제합니다.json:

"proxy": {
    "/auth/google": {
        "target": "http://localhost:5000"
    }
}
  1. 이제 프록시의 설치 파일을 만듭니다.클라이언트 측의 src 폴더에 setupProxy.js라는 이름을 붙이고 다음 코드를 입력해야 합니다.
const proxy = require('http-proxy-middleware');
module.exports = function(app) {
    app.use(proxy('/auth/google', 
        { target: 'http://localhost:5000/' }
    ));
}

자세한 것은, 이쪽을 참조해 주세요.

"create-react-app" 문제인 것 같습니다.

https://github.com/facebook/create-react-app/issues/5103에 접속하여 새로운 프록시 처리 방법으로 이행할 수 있습니다.

즉, 「http-proxy-middleware」라고 하는 새로운 라이브러리를 인스톨 하면 됩니다.

npm install http-proxy-middleware --save

그런 다음 "src/setupProxy.js" 파일을 새로 만들고

const proxy = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(proxy('/auth/google', { target: 'http://localhost:5000/' }));
};

이것으로 당신의 문제가 해결되길 바랍니다, 행복한 해킹!

먼저 npm 또는 Yarn을 사용하여http-proxy-middleware를 설치합니다.

$ npm install http-proxy-middleware --save
$ # or
$ yarn add http-proxy-middleware

다음으로 src/setupProxy.js를 생성하여 다음 내용을 저장합니다.

const proxy = require('http-proxy-middleware')

module.exports = function(app) {
  // ...
}

이제 프록시 오브젝트의 각 엔트리를 하나씩 이행합니다.

"proxy": {
  "/api": {
    "target": "http://localhost:5000/"
    },
  "/*.svg": {
    "target": "http://localhost:5000/"
  }
}

를 트트치에 배치하다src/setupProxy.js다음과 같이 합니다.

const proxy = require('http-proxy-middleware')

module.exports = function(app) {
  app.use(proxy('/api', { target: 'http://localhost:5000/' }))
  app.use(proxy('/*.svg', { target: 'http://localhost:5000/' }))
}

거기서도 완전 커스텀 로직을 사용할 수 있습니다!이 링크에서 작업 응답을 받았기 때문에 공유 - https://github.com/facebook/create-react-app/issues/5103

을 설치하세요http-proxy-middleware「 」를 .npm i --save http-proxy-middleware내 the의 client더입니니다다

.package.json:

"proxy": {
    "/auth/google": {
        "target": "http://localhost:5000"
    }
}

이제 프록시의 설치 파일을 만듭니다.을 붙여야 합니다.setupProxy.js클라이언트 측의 src 폴더에 다음 코드를 입력합니다.

const { createProxyMiddleware } = require("http-proxy-middleware");

module.exports = function (app) {
  app.use(
    createProxyMiddleware("/auth/google", { target: "http://localhost:5000/" })
  );
};

PS: You don't need to include PS: 포함시킬 필요는 없습니다.setupProxy.js anywhere in 어디든지server.js or 또는index.js. 그냥 복사하고 붙여넣습니다.복사해서 붙여넣기만 하면 돼

다음과 같은 것이 도움이 되었습니다.

package.json에서 "proxy"를 삭제합니다.

클라이언트 디렉토리에 'http-proxy-middleware'를 설치합니다.이를 수행하려면 cd를 클라이언트 디렉토리에 삽입하고 "npm i --save http-proxy-middleware"를 실행합니다.그런 다음 클라이언트의 src 디렉토리에 "setupProxy.js"라는 새 파일을 만듭니다.이 파일에 다음 코드를 입력합니다.

const { createProxyMiddleware } = require('http-proxy-middleware');
const proxy = require('http-proxy-middleware');
module.exports = function(app) {
    app.use(createProxyMiddleware('/api/', // replace with your endpoint
        { target: 'http://localhost:8000' } // replace with your target
    ));
}

서버를 재기동하면, 준비는 완료됩니다.

프록시를 이와 같은 것으로 변경하고 나에게 효과가 있기를 바랍니다.

"실행":"filename://localhost:filename/auth/google

현재 React 16.8.13을 사용하고 있습니다.

1 - 삭제"proxy": {***}부에서package.json파일 일.

2기통npm install http-proxy-middleware

파일 생성src/setupProxy.js

4 - 다음과 같이 코드를 삽입합니다.

const {createProxyMiddleware} = require('http-proxy-middleware');

module.exports = (app) => {
    app.use(
        createProxyMiddleware('/endpoint/*', {
            target: 'http://address/',
            secure: false,
        }),
    );
};

및 예: URL)localhost:3000/api/backend/some/method로로 합니다.https://api-server.example.com/some/method , 을.pathRewrite★★★★

const {createProxyMiddleware} = require("http-proxy-middleware");

module.exports = function(app) {
  app.use(
    "/api/backend",
    createProxyMiddleware({
      target: "https://api-server.example.com",
      changeOrigin: true,
      pathRewrite: {
        "^/api/backend": "",
      },
    })
  );
};

「서버의 내부가 아닌」클라이언트에 「syslog-middleware」를 인스톨 합니다.

클라이언트/src/디렉토리 내에 setupProxy.js를 추가합니다.( client / src / setup Proxy . js )

여기에 아래 행을 추가합니다.

const proxy = require("http-proxy-middleware");

module.exports = app => {
   app.use(proxy("/auth/google", { target: "http://localhost:5000/" }));
};

이상입니다. 구글 개발 콘솔로 이동하여 프로젝트에 localhost:3000/auth/google/callback을 추가합니다.

https://github.com/facebook/create-react-app/issues/5103

고급 프록시 구성을 src/setupProxy.js로 이동합니다.

이 변경은 v1에서 고급 프록시 구성을 사용한 개인에게만 필요합니다.

작업이 필요한지 여부를 확인하려면 package.json에서 프록시 키를 찾습니다.그런 다음 아래 표를 따르세요.

패키지에서 프록시 키를 찾을 수 없습니다.json 액션은 필요 없습니다!프록시의 값은 문자열입니다(예: http://localhost:5000). 액션은 필요 없습니다!프록시의 값은 개체입니다. 아래 마이그레이션 지침을 따르십시오.프록시가 개체인 경우 고급 프록시 구성을 사용하고 있음을 의미합니다.

프록시 필드가 http://localhost:5000과 같은 문자열인 경우 아무것도 수행할 필요가 없습니다.이 기능은 계속 지원되며 동작은 동일합니다.

먼저 npm 또는 Yarn을 사용하여http-proxy-middleware를 설치합니다.

$ npm install http-proxy-middleware --save
$ # or
$ yarn add http-proxy-middleware

다음으로 src/setupProxy.js를 생성하여 다음 내용을 저장합니다.

const proxy = require('http-proxy-middleware')

module.exports = function(app) {
  // ...
}

이제 프록시 오브젝트의 각 엔트리를 하나씩 이행합니다.

"proxy": {
  "/api": {
    "target": "http://localhost:5000/"
    },
  "/*.svg": {
    "target": "http://localhost:5000/"
  }
}

다음과 같이 src/setupProxy.js에 엔트리를 배치합니다.

const proxy = require('http-proxy-middleware')

module.exports = function(app) {
  app.use(proxy('/api', { target: 'http://localhost:5000/' }))
  app.use(proxy('/*.svg', { target: 'http://localhost:5000/' }))
}

거기서도 완전 커스텀 로직을 사용할 수 있습니다!전에는 불가능했어요.

됐다.

app.use(
  '/api',
  proxy({ target: 'http://www.example.org', changeOrigin: true })
);


changeOrigin:true

제 경우 src/setupProxy.js는 필요 없습니다.난 그걸 악리로 하는데...Axios 프록시 정보 확인

노드 라이브러리가 있는지 없는지 체크 인합니다.http-proxy-middleware는 옵션입니다.필요없었습니다!!

서버측의 재기동을 시도하기만 하면 끝!!!체크에 추가:

componentDidMount(){
    axios.get('/api/path-you-want').then(response=>{
      console.log(response)
    })
  }

이는 create-react-app 버전2의 버그와 관련되어 있습니다.

그냥 뛰어!

$ npm install react-scripts@next --save
$ # or
$ yarn add react-scripts@next

답변은 다음 위치에서 찾을 수 있습니다.

https://github.com/facebook/create-react-app/issues/5103

        ...
        "scripts": {
            "start": "react-scripts start",
            "build": "react-scripts build",
            "test": "react-scripts test",
            "eject": "react-scripts eject"
          },
          "proxy": {
            "/auth/google": {
              "target": "http://localhost:5000"
            }
           },
        ...

    When specified, "proxy" in package.json must be a string.
    Just change `"proxy": "http://localhost:5000"` and you are good to go.
    If that doesn't solve the problem then register your proxy using **http-proxy-middleware**

    $ npm install http-proxy-middleware --save
    $ # or
    $ yarn add http-proxy-middleware

    Then create setypProxy.js file under src directory the put the following code.
const proxy = require('http-proxy-middleware');
module.exports = app => {
  app.use(
    proxy('/auth/google', {
      target: 'http://localhost:5000'
    })
  );
 app.use(
    proxy('/auth/facebook', {
      target: 'http://localhost:6000'
    })
  );
};

src 폴더 내에 setupProxy.js 파일을 만들고 다음 코드를 복사 붙여넣습니다.

const { createProxyMiddleware } = require("http-proxy-middleware");

module.exports = function (app) {
  app.use(
    createProxyMiddleware("/auth/google", {
      target: "http://localhost:5000/",
    })
  );
};

이것은 나에게 효과가 있었다(여러 사람이 이미 회답한 것처럼).하지만 2021년에도 유효한 답변인지 묻는 사람이 있을 때를 대비해서 이 글을 씁니다.

  • 패키지에서 삭제해 주세요.json 파일:
  "proxy": {
            "/auth/google": {
              "target": "http://localhost:5000"
            }
  • npm install --save http-proxy-middleware를 실행하여 프록시 미들웨어를 설치합니다.
  • 프론트 엔드의 src 파일(index.js 파일 바로 옆)에 setupProxy.js 파일을 만듭니다.
  • setupProxy.js 파일 입력:
const proxy = require('http-proxy-middleware');

module.exports = function(app) {
    app.use(proxy('/auth/google', 
        { target: 'http://localhost:5000/' }
    ));

물론 포트에는 어떤 것이든 상관없습니다.5000일 필요는 없습니다.백엔드 서비스를 실행하고 있는 장소.바로 그거야.이 파일을 Import 할 필요가 없습니다.그것은 그대로 작동한다.

클라이언트 측(React 앱)에서 파일을 작성한 후src/setupProxy.js서버를 재시작해야 합니다.패키지.소스 디렉토리 외부의 파일을 취급하고 있었기 때문에, json 파일을 재기동할 필요가 있습니다.

언급URL : https://stackoverflow.com/questions/52605997/when-specified-proxy-in-package-json-must-be-a-string

'source' 카테고리의 다른 글

플럭스 아키텍처에서는 스토어 라이프 사이클을 어떻게 관리합니까?  (0) 2023.03.11
SpringBoot 오류: 드라이버 ClassName=driver.jdbc.driver에 등록된 드라이버입니다.OracleDriver를 찾을 수 없습니다. 직접 인스턴스화를 시도합니다.  (0) 2023.03.11
유휴 사용자에 따라 Angularjs를 사용한 자동 로그아웃  (0) 2023.03.11
Localhost에서 사이트 URL 및 WordPress URL 변경  (0) 2023.03.11
MongoDB 컬렉션의 모든 문서에 새 필드 추가  (0) 2023.03.11

'source'의 다른글

  • 현재글지정 시 패키지에 "프록시"가 있습니다.json은 문자열이어야 합니다.

관련글

댓글

티스토리툴바