proxy와 CORS 2편

이젠 create-react-app프로젝트와 express 서버 간의 요청의 경우를 살펴보자.

 

create-react-app 프로젝트의 스크립트 안에서 서버에 어떻게 CORS policy를 위반하지 않고

http request를 잘 보낼 수 있을까?

 

 

 

[1] 빌드해서 연결해서 요청보내기 (npm run build) => 같은 오리진이니까 문제 없다

간이 예를 들어보자면

빌드 명령어 결과로 생성된 build 디렉토리 아래다가 이런 간단한 express 서버를 만들어서 연결해보자.

 

 

 

[2] npm start 명령어일때 드디어 CORS 문제 발생

     => 최종 연결할 서버가 아니라 dev용 서버에 연결되어 돌아가기 때문에. 

 

( 참고 ) create-react-app 의 dev 서버에 대한 글 :

2021.02.27 - [WEB] - create-react-app으로 만든 app에서 테스트용 서버는 어떻게 돌아가나

 

api 제공 서버는 1편의 서버A랑 동일하게 하고, App.js 파일을 다음과 같이 작성한뒤

다른 설정없이 App.js 내에서 직접 api 요청을 보내봤다.

const React = require('react');
const { Component } = React;

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      done:false,
      students:[],
    };
  }

  clickHandler = async (e) => {
    try {
      // let res = await (await fetch('/students')).json();      //dev 서버로 요청
      let res = await (await fetch('http://localhost:8000/students')).json();    //api 서버로 요청
      console.log(res);
      this.setState({done:true, students: res.list});
      console.log(this.state);
    } catch (e) {
      console.log(e);
    }

  }

  render() {
    return (
      <>
        {this.state.done ? "done" :<button onClick={this.clickHandler}>get info</button>}
        <ul>
          {this.state.students.map(x => {return  <li key={x.name}>{`이름 : ${x.name}, 나이:${x.age}`}</li> })}
        </ul>
      </>
    );
  }
}

export default App;

CORS error....

 

 

 

 

해결방법

1편에서 알아본대로

(1) dev서버에 프록시 설정을 해서 얘를 통해 api 요청을 보내는 방법

    - http-proxy-middleware 모듈 사용하기 (반드시 src/setupProxy.js 파일에 작성해야 한다)

    - package.json에서 proxy 설정

   

(2) 프론트단의 스크립트 내에서 직접 요청을 보내되, api 제공 서버에 CORS 설정을 해두는 방법

    - express 서버라면 cors 모듈 사용하면 간단하다.

    - apache, nginx, AWS같은 다른 서버의 CORS config에 대한 정보는 이 블로그에 나와있다. 

    

why you should (almost) never use an absolute path to your APIs again

이 글에 따르면 Build Once, Deploy many principle을 따르기 위해 (1)번 방법을 선택할 것을 추천하고 있다.

 

(1) proxy 사용하기

여기서 proxy 설정을 해야하는 대상이 꽁꽁 숨긴 dev 서버라 1편처럼 자유롭게 하기보단 정해진 규칙을 따라야한다.

이 경우는 App.js에서 dev서버로 요청을 보내게 url 수정해줘야 된다.

 

1-1 http-proxy-middleware

꼭 src/setupProxy.js 에 이런식으로 작성해야 한다 (폴더, 파일명 일치해야 작동함)

const  {createProxyMiddleware} = require('http-proxy-middleware');

module.exports = function(app){
    app.use('/students', createProxyMiddleware({target:'http://localhost:8000'}))
};

왜냐 node_modules > react-scripts > config > paths.js 파일을 보면 이렇게 되어있다...

그러면 node_modules > react-scripts > config > webpackDevServer.config.js 에서 이런식으로 가져다 쓴다.

잘 실행된다.

 

1-2 더 간단하게는 package.json에 이렇게 덧붙여주면 된다.

node_modules > react-scripts > scripts > start.js 에서 사용하는 모습을 발견할 수 있다.

 

 

(2) 서버에 CORS 설정하기

이때 클라이언트측의 api 요청 api서버로 직접 보내게 하기.

const cors = require('cors');

app.use(cors())     //모든 오리진 허용

express 서버라면 이렇게 하면 모든 오리진에 대해 CORS 요청 허용한다.