How to fix the ERROR that 'net::ERR_CONNECTION_REFUSED' on Node.js?

환경

 

Platform: React

URL: http://localhost:3000

API PATH : http://localhost:3000/api/...

used HTTP Request Module : Axios

 

 

---

 

문제

 

리엑트 프로젝트에서

프론트 단에서 백엔드 단으로 REST API를 요청 하는 부분이 있다.

이때 서버 포트가 3000이라, 요청 주소를 'http://localhost:3000'으로 하고

로컬에서 작업을 하면 무리없이 잘 동작하지만

실제 서버에서 동작을 시키게되면 http 요청을 실패하게 된다.

(서버에 접속해 직접 curl로 요청을 하면 또 잘된다.)

 

---

문제 발생 과정

 

Part of request source,

// front-end
const baseUrl = 'http://localhost:3000/api';
	
const options = {
	method: 'GET',
	url: baseUrl+'/PATH',
	headers: {
   	    'Content-Type': 'application/x-www-form-urlencoded',
	},
};

// request
axios(options).then(...);
    
...

 

Upload build files to server and run.

 

 

I got a error message,

net::ERR_CONNECTION_REFUSED

 

 Captures,

 

 

---

해결

 

결론부터말하면 cors를 설정해서 허용해주면 된다.

cors는 도메인 또는 포트가 다른 서버의 자원을 가져오는 매커니즘이다.(자세한건 구글링)

 

보통 같은 도메인내에서 이루워지는 요청은 허용이 되는데

이 경우 서버의 hosts 파일에 localhost가 등록 되어 있는데도 불구하고

localhost:3000을 다른 도메인으로 인식을 하는거 같았다.

 

그래서 백엔드 단에 cors을 적용했다.

npm install --save cors

// back-end
...
const corsOptions = {
  origin: 'http://localhost:3000',
  credentials: true, 
};

app.use(cors(corsOptions));
...

 

다시 적용하고 나니 잘 동작한다!