inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

따라하며 배우는 노드, 리액트 시리즈 - 기본 강의

노드 리액트 기초 강의 #22 CORS 이슈, Proxy 설정

안녕하세요 Error occurred while proxying request 에러 발생. 3시간째 고민중입니다ㅠ

7433

김동현

작성한 질문수 38

1

proxy가 정상작동하는 건 확인했습니다만 

아래 에러와 같이 requeset가 실패했다고 하고 status 500 에러가 뜨는데

500 에러는 주로 서버 문제라고 들었습니다.. 그래서 서버랑 클라이언트 둘다 올려봅니다.

클라이언트 랜딩페이지

글이 잘 나오는 걸로 봐서는 서버 문제인것 같습니다..!

index.js(서버)

깃헙주소입니다!

https://github.com/BomUlUL/NodeReact

항상 감사합니다!

 

----추가!!!!

다시 보니 proxy문제인것 같습니다

"Error occurred while proxying request noderea

tlogin-yqvpb.run.goorm.io/api/hello to https://localhost:5000/" 이렇게 뜨네요 

서버랑 클라이언트 둘다 켜져있는데 도대체 왜 안되는건지.. 머리 터질것 같습니단 ㅠ

 

 

 

브라우저 ide를 쓰니 주소가 nodereatlogin-yqvpb.run.goorm.io/api/hello 이렇게 뜹니다.

여기서 localhost5000으로 돌려주는게 아닌가요?

서버 react 에러 nodejs

답변 2

2

John Ahn

안녕하세요 !!! 

setupProxy 파일 지워주시고, 

package.json 파일에 

"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"proxy": "http://localhost:5000"
,
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},

이런식으로 proxy를 넣어주셔서 하시면 됩니다 ㅎㅎㅎ 

수고하세요 !!

0

김동현

------------ 해결했습니다 -----------

말씀해주신대로 pakage.json 에 프록시를 작성하니 

정상적으로 주소가 변경?되었고, 클라이언트에서 invalid host header 에러가 떴지만

/node_modules/react-scripts/config/webpackDevServer.config.js 파일을 열어서

 disableHostCheck:
      !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true',

이 부분을

 

    disableHostCheck:true,
    //  !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true',
렇게 바꾸니까 됬습니다. 감사합니다
--------------------------------------------------------------------

말씀하신대로 pakage.json 파일에서 proxy를 설정해주니 더 이상 "Error occurred while proxying request" 에러는 뜨지 않습니다. 덕분에 setupProxy랑 pakage.js, 두가지 방법이 있는것도 알게되네요 감사합니다.

하지만 이제 404 에러가 뜹니다.

server/index.js 에 

app.get('/api/hello', (req,res) => {

  res.send("Hello World~ ")

})

이렇게 해주면 클라이언트에서 위 주소(서버)로 접근할때 포트를 5000번으로 proxy하여 접근이 가능하게 된 것이지 않나요?

근데 왜 해당 주소를 찾을 수가 없는지..ㅠ

stackoverflow에서 찾아보니까 뭔 app.get('/api/hello', ~ 이부분을 app.get('http://localhost/api/hello', ~

뭐 이렇게 바꾸라는 말도 있어서 해보니까 네트워크 에러가 나네요 혹시 아실까 해서 질문드립니다.

모든게 브라우저ide를 써서 그런가싶기도 하구요.. 근데 그럴수밖에 없는 사정(군인)이라...

0

김동현

해결했습니다.!

 

okky에도 질문글을 올렸습니다..이 글이 좀더 상세하게 설명해논 것이라 가능하다면 참고해주시면 감사하겠습니다.

https://okky.kr/article/1098074

0

양보영

어떻게 해결하셨나요?ㅠㅠㅠ

깃 이메일이랑 비번이 필요하다고 하네요

0

38

1

404 에러

0

104

1

34강 인증 체크에서 element 사용 때문에 에러나시는 분들 이렇게 하심 됩니다.

0

121

1

로그인, 로그아웃, 토근 작동 안 함

0

240

0

9강 오류 어떻게 해결하나요?

0

195

1

localhost 에서 연결을 거부했습니다.

0

1932

4

포스트맨에서 true가 안떠요

0

151

1

왜 안되나요

0

130

1

몽고db 연결 오류가 납니다 위에껀 입력한 코드, 아래껀 터미널이에요

0

243

1

로그아웃 401 에러(Unauthorized)

0

506

2

암호가 해싱되지 않고 입력값 그대로 db에 저장되는 문제

0

151

1

7강중에서

0

167

2

User.findByToken is not a function

0

213

1

루트 디렉토리

0

275

1

useState

0

563

1

프록시 잘 설정했는데도 404 오류 뜨는 분들

5

876

6

webpack 관련 에러 질문

0

221

1

리액트 관련 질문

0

275

1

14강 로그아웃 안됨

0

319

1

mongoDB 데이터 확인하는 법

0

411

1

postman 에러

0

294

1

선생님 리덕스를 사용하면 어떠한 부분이 좋은지 알 수 있을까요?

0

236

1

다음과 같은 에러들이 발생합니다.

0

274

1

14강 로그아웃 기능 구현시 postman에서 Cannot POST 오류가 뜹니다.

0

380

1