데이터 Flow Axios Cors Proxy

npm install axios --save

 

//localhost:3000
import React, {useEffect} from 'react'
import axios from 'axios';
import { response } from 'express';

function LandingPage() {

    useEffect(() => {
        axios.get('http://localhost:5000/api/hello')
        .then(response => console.log(response.data))
    }, [])

    return (
        <div>
            랜딩페이지
        </div>
    )
}

export default LandingPage

//localhost:5000
app.get('/api/hello', (req, res) => {
  res.send('안녕하세요')
})

클라이언트는 3000번 port이고 서버는 5000번 port이기 때문에

Cors 정책으로 (Cross-Origin Resource Sharing) 에러가 발생한다.

이 정책은 다른 웹 사이트에서 내 서버에 요청을 보내게 되면 보안적인 이슈가 발생할 것이다.

그래서 이 정책이 있는 것

 

이 문제를 해결하기 위해서 proxy를 사용한다.

Proxying API Requests in Development | Create React App

npm install http-proxy-middleware --save

위 모듈을 다운받아야함

그리고 src/setupProxy.js 파일을 만들고 아래 코드 신 버전과 구 버전 둘 중 하나를 넣는다.

// 신 버전
const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:5000',
      changeOrigin: true,
    })
  );
};

// 구 버전
const proxy  = require('http-proxy-middleware');

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

npm "createproxymiddleware is not a function" 이런 에러가 뜬다면 위에 구버전 이용

타겟은 서버 부분의 포트번호를 넣어주면 된다.

 

그리고 프론트 부분에 axios.get(path) path를 수정해 준다.

//localhost:3000
import React, {useEffect} from 'react'
import axios from 'axios';
import { response } from 'express';

function LandingPage() {

    useEffect(() => {
        axios.get('/api/hello')
        .then(response => console.log(response))
    }, [])

    return (
        <div>
            랜딩페이지
        </div>
    )
}

export default LandingPage

 

그리고 서버를 열고 클라이언트도 열어보면 이렇게 에러가 뜨지 않고 response가 나온 것을 확인할 수 있다.

 

 

proxy 서버에서 할 수 있는 것

1. 방화벽 기능

2. 웹 필터 기능

3. 캐쉬 데이터, 공유 데이터 제공 기능

4. 아이피 변경 그래서 인터넷에서 접근하는 사람의 아이피를 모르게 만들 수 있다.

5. 보내는 데이터 변경 가능

 

proxy 사용 이유

1. 인터넷 사용 제어

2. 캐쉬를 이용한 더 빠른 인터넷 제공

3. 더 나은 보안 제공

4. 이용 제한된 사이트 접근 가능