리액트 및 노드에 대해 프록시가 작동하지 않음

리액트 및 노드에 대해 프록시가 작동하지 않음

설정한 프록시에 문제가 있습니다.

이것은 나의 루트 패키지입니다.json 파일:

"scripts": {
    "client": "cd client && yarn dev-server",
    "server": "nodemon server.js",
    "dev": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\""
}

내 클라이언트 패키지json 파일:

"scripts": {
    "serve": "live-server public/",
    "build": "webpack",
    "dev-server": "webpack-dev-server"
},
"proxy": "http://localhost:5000/"

서버 측에서 포트 5000에서 실행되도록 express를 설정했습니다.서버에 요청을 할 때마다 다음과 같이 입력합니다.

callApi = async () => {
    const response = await fetch('/api/hello');
    const body = await response.json();
    // ... more stuff
}

요청은 항상 다음에게 전달됩니다.

요청이 실제로 포트 5000으로 전송되도록 이 문제를 수정하려면 어떻게 해야 하는지 누군가 지적해 주실 수 있습니까?

저는 이 문제를 여러 번 경험했는데, 캐시 때문이라고 생각했습니다.이 문제를 해결하려면 다음을 수행합니다.

---

편집 : @mkoe 님은 package-lock.json 파일을 삭제하고 앱을 재시작하는 것만으로 이 문제를 해결할 수 있다고 하셨으니 먼저 시도해보시기 바랍니다.그래도 해결되지 않으면 다음을 수행합니다.

---

1. 리액트 앱 정지
2. package-lock.json 파일과 node_modules 디렉토리를 삭제합니다.
   rm -r package-lock.json node_modules
   을 사용하다
3. ★★★★★★★★★★★★★★★★★★.npm install을 사용하다

이것으로 당신의 프록시 문제가 해결되었기를 바랍니다.

리액트 애플리케이션이 아직 localhost:8080을 가리키고 있는 이유는 캐시 때문입니다.클리어 하려면 , 다음의 순서에 따릅니다.

1. ★★package-lock.json ★★★★★★★★★★★★★★★★★」node_modules React 앱
2. "Respect Terminal"을 끕니다.npm install AppReact App에
3. React App을 다시 켜면 프록시가 작동합니다.

이 문제는 오랫동안 저를 괴롭혔지만, 위의 단계를 따르면 React 응용 프로그램이 서버를 올바르게 가리키게 될 것입니다.

이렇게 해서 프록시 콜을 할 수 있었습니다.

1. 브라우저의 네트워크 탭에 의존하지 마십시오.서버 컨트롤러에 콘솔을 설치하여 콜이 발신되고 있는지 여부를 확인합니다.저는 서버 측에서 로그를 볼 수 있었습니다.노드 서버는 5000에서 실행되고 클라이언트는 3000에서 실행되고 있습니다.

네트워크 탭 -

서버 로그 -

2. 가 실제로 되고 있는지 합니다./api/hello★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★는 는는였다./api/user/register/api/user
3. cors 패키지를 사용하여 오리진 간 액세스 문제를 비활성화합니다.

의 클라이언트는 라언언 is is에서 로드되고 ?http://localhost:8080

로는 " " " 입니다.fetchapi는 절대 URL 없이 사용할 경우 클라이언트 페이지의 호스트(호스트명과 포트)를 미러링합니다. 전화하기fetch('/api/hello');에서 되고 있는 http://localhost:8080 야기하다fetch하여 api의 URL로 할 수 .http://localhost:8080/api/hello.

이와 같이 포토를 변경하는 경우는, 절대 URL 를 지정할 필요가 있습니다., 은 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★.fetch('http://localhost:5000/api/hello');, 에서는 하지 않기 만, 에서는 동작하지 않습니다.localhost산용입입니니다

는 ★★★★★★★★★★★★★★★★★★."proxy" = "http://localhost:5000듣고 있었기 때문에 동작하지 않았다.0.0.0.0변변으로 "proxy" = "http://0.0.0.0:5000효과가 있었다.

꼭 포장해 주세요.패키지가 아닌 클라이언트 측(클라이언트 측)에 json이 있습니다.서버측(노드)의 json.

이 솔루션은 특히 웹 팩을 사용하는 경우에는 효과가 있었습니다.

webpack.config.js > devServer > 다음 항목을 추가합니다.

프록시: {/api': 'proxy://localhost:3000/', ,

잘 될 거야

webpack devSever 프록시에 대한 자세한 내용은 https://webpack.js.org/configuration/dev-server/#devserver-displays를 참조하십시오.

나는 이 문제를 해결하기 위해 많은 방법을 사용했지만 아무런 소용이 없었다.많은 조사 결과, 아래에 제시된 솔루션을 통해 프록시 문제를 해결하고 프런트엔드와 노드 서버를 연결할 수 있게 되었습니다.그 스텝은

1. 프런트 엔드 서버와 백엔드 서버를 모두 정지할 수 있도록 모든 단말기를 정지합니다.
2. My Node server.js 파일에 Cors 설치.

npm install cors

그리고 이 행을 server.js 파일에 추가했습니다.

var cors = require('cors')

app.use(cors())

3. 패키지로.프런트엔드 또는 클라이언트 폴더의 json 파일, 이 행을 추가했습니다.

"proxy" : "http://127.0.0.1:my_servers_port_address_"

이제 모든 게 잘 돌아가네요.

그렇지 않을 수도 있지만 5000으로 프록시할 때 서버가 localhost 5500에서 실행되고 있었기 때문에 문제가 있었습니다.

짐을 바꿨어요.json 파일을 5500으로 변경하고 다음 스크립트를 사용합니다.

npm config set proxy http://proxy.company.com:8080 npm config set https-https http://proxy.company.com:8080

패키지의 내용만 변경해도 될 것 같습니다.json은 효과가 있었지만 내가 뭘 했는지 알려주고 싶었어.

1. 프록시 주소를 클라이언트주소가 아닌 백엔드 서버로 설정할 필요가 있습니다.
2. 할 필요가 .package.json
3. 도 이렇게 써야 요.fetch('/api/...'))fetch('http://localhost:8080/api/'))

해 주세요..env변수도 사용할 수 있습니다.그 페이지에서 해결책을 찾고 있다면 그 때문입니다.

모든 해결책을 시도해보고 여기서 제안했지만 소용이 없었어요.그 후 루트 디렉토리에서 가져오려고 했습니다(즉,fetch('/')어떤 이유에선지 정확하지 않습니다.사용.fetch('/something')날 도와줬어

백엔드 데이터 또는 파일과 리액트 빌드 파일은 동일한 서버 폴더 내에 있어야 합니다.

이름 뒤에 프록시를 지정해야 합니다.{"name":"Project Name", "proxy":"http://localhost:5000"}포트가 백엔드의 포트와 일치해야 합니다.

프록시를 수행할 경로에 대해 404가 아닌 정적 반응 앱 HTML 페이지가 제공되는 경우 다음 질문과 답변을 참조하십시오.

https://stackoverflow.com/a/51051360/345648

(원래의 질문에 대한 답변은 아니지만, Google을 검색한 결과, 이 질문이 나와 같은 사람에게 도움이 될 수 있습니다.

제 경우에는 노드 백엔드와 리액트 프로젝트가 있는 내부 폴더가 모두 있었습니다.나는 @Harshit의 답변을 두 개의 패키지가 도착할 때까지 시도했지만 소용이 없었다.json 파일은 프로젝트, 외부 폴더, 클라이언트(React) 폴더 각각에 있습니다.내부 패키지에 프록시를 설정해야 했습니다.제이슨, 그리고 내부 폴더의 캐시를 지워야 했어요

저는 몇 시간 동안 이 문제를 겪고 있었고, 위의 몇 가지 사항들이 다른 경우에 원인이 될 수 있다고 확신합니다.다만, 제 경우, 저는 Vite를 사용하고 있으며, 제 프록시를 Vite에 추가하려고 했습니다.package.json파일, 단, 이 파일은 에 추가해야 합니다.vite.config.js여기를 클릭하여 Vite의 문서에서 읽어보실 수 있습니다.

결국 내 코드는 다음과 같습니다.

export default defineConfig({
  server: {
    proxy: {
      "/api": {
        target: "http://localhost:8000",
        secure: false,
      },
    },
  },
  plugins: [react()],
});

문제는 프록시 루트의 "localhost" 부분입니다.컴퓨터가 "localhost"를 인식하지 못하기 때문에 와 스왑했습니다.http://127.0.0.1:<PORT_HERE>대신http://localhost:<PORT_HERE>.

다음과 같은 경우:

app.use('/', proxy(
    'http://localhost:3000', // replace this with 'http://127.0.0.1:3000'
    { proxyReqPathResolver: (req) => `http://localhost:3000${req.url}` }
));`

저는 프런트엔드와 백엔드 등 양쪽 서버를 정지하고 다시 재시작하는 것만으로 이 문제를 해결했습니다.

프록시를 사용하지 말고 직접 가져오기를 사용한다는 의견이 있습니다.

동작하지 않다

fetch("/signup", {    
        method:"post", 
        headers:{
            "Content-Type":"application/json" 
        },
        body:JSON.stringify(
        {
            name:"",
            email:"",
            password:"",
        }
        )

실제로 6시간을 낭비하고 일을 했다.

fetch("http://localhost:5000/signup", {    //    https -> http
        // fetch("/signup", {    
        method:"post", 
        headers:{
            "Content-Type":"application/json"              },
        body:JSON.stringify(
        {
            name:"",
            email:"",
            password:"",
        }
        )

제 경우 프록시가 갑자기 작동을 멈춘 것이 문제였습니다.

조사 결과 setup Proxy를 src 폴더에서 이동시켰기 때문에 문제가 발생하였습니다.

src 폴더로 다시 이동하면 문제가 해결되었습니다.

문제가 있는 구조:

해결 방법:

비슷한 문제에 직면했다.프록시가 연결되지 않아 리액트 앱을 재시작하면 문제가 해결되었습니다.

저 같은 경우에는 오타 때문이었어요.나는 썼다"Content-type": "application/json",(로)가 (작은 t로"Content-Type": "application/json",

다음 패키지를 설치해야 합니다.

npm install http-middleware --save

참조: 이 링크

엔드 포인트가 백엔드와 일치하는지 확인합니다.

언급URL : https://stackoverflow.com/questions/48291950/proxy-not-working-for-react-and-node