React 로 서버에 요청하기 (코드스니펫 기록)

Cookie 및 CORS 관련 설정체크를 백엔드에서 충분히 검토(특히 preflight)하고 배포하기 위해 간단하게 React 를 띄워 서버에 요청할 때 jsx 문법을 찾아보는 시간을 줄이기 위한 기록용 포스팅이다. 

preflight 는 헤더 값을 추가하면 trigger 된다.

(물론 브라우저에서 trigger 하지 않는 예외적인 헤더들도 존재한다)

 

1. Create React App 실행

2. Install Axios

3. 리액트 코드 작성 (App.js)

import logo from './logo.svg';
import './App.css';
import axios from 'axios'

const sendRequest = () => {
  axios({
    url: 'https://www.naver.com',
    method: 'get',
    headers: {
      'My-Server-Key':'abc'
    },
  }).then(
    function (response) {
      console.log("response: ", response)
    }
  );
}


function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <button onClick={sendRequest} >My Button</button>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;