CORS, Proxy 설정

CORS

• 'Cross Origin Resouces Sharing' 의 약자.
• 서로 다른 포트를 가진 서버에선 아무 설정없이 request를 보낼 수 없다.(2010년이었나 그때 웹페이지 만들 때는 안 나왔던 걸로 기억!)
• 악의를 가진 사람 등이 서버에 막 보낼 수도 있으니 보안상의 문제로 막아버림.
  
• CORS문제 해결없이 구동시
  
  

해결방안

proxy를 사용하는 방법으로 CORS문제 해결

• [참고자료]proxying-api-requests-in-development
• client 부분의 모듈 추가
  npm install http-proxy-middleware --save
• client/src/setupProxy.js 파일 생성
• setProxy.js 파일 안에 내용 추가

const { createProxyMiddleware } = require("http-proxy-middleware");
module.exports = function (app) {
  app.use(
    "/api",
    createProxyMiddleware({
      target: "http://localhost:5000",
      changeOrigin: true,
    })
  );
};

• client/src/components/views/LandingPage/LandingPage.js 내용 수정

import React, { useEffect} from 'react'
import axios from 'axios';
function LandingPage() {
    useEffect(() => {
        axios.get('/api/hello')
      //위의 부분은 axios.get('http://localhost:5000/api/hello') 였음.
        .then(Response => console.log(Response.data))
}, [])
    return (
        <div>
            LandingPage
        </div>
    )
}
export default LandingPage

• 결과
  
  
• 서버에서 보내온 데이터를 콘솔에서 제대로 출력하는 걸 볼 수 있다.

Proxy Server

• 프록시 서버는 클라이언트가 자신을 통해서 다른 네트워크 서비스에 간접적으로 접속할 수 있게 해 주는 컴퓨터 시스템이나 응용 프로그램을 가리킨다 by 위키백과
• IP를 Proxy server에서 임의로 바꿀 수 있기에 인터넷에선 접근하는 사람의 IP를 모르게 됨.
• 보내는 데이터도 임의로 변경 가능
• 방화벽 기능
• 웹필터 기능
• 캐쉬데이터, 공유 데이터 제공기능. 이러한 데이터를 Proxy Server에 올려둬서 인터넷까지 가지 않아도 처리가능하기에 좀 더 빨리 유저가 데이터를 받아 볼 수 있게 한다.

사용 이유:

• 회사에서나 집에서 인터넷 사용 제어
• 캐쉬를 이용해 더 빠른 인터넷 이용 가능
• 더 나은 보안
• 이용제한된 사이트 이용 가능