[React] Proxy설정 / CORS이슈

flo에서 노래 차트 가져와서 recoil을 공부해보려던 참에,,,
api를 가져오는 것에서부터 막혔다
ㅋㅋ
시작부터 안되는 것 아니겠는가...

https://cbw1030.tistory.com/267
CORS이슈가 왜 생기는지 친절하게 알려주신 블로그

1. 파일 생성

scr/setupProxy 로 설정했다. 따로 불러오지 않아도 된다
https://create-react-app.dev/docs/proxying-api-requests-in-development/
공식문서를 참고했음 !!

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

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'https://www.music-flo.com', //서버 주소
      changeOrigin: true,
    })
  );
};

2. 사용

import React, {useState, useEffect} from 'react';
import axios from 'axios';

function App() {
  const [state, setState]=useState(null);
  useEffect(()=>{
    axios.get('/api/meta/v1/track/KPOP/new?page=1&size=100&timestamp=1611764916568') //앞에 중복되는 부분빼고 적어주면 된다 ('https://www.music-flo.com' 부분 생략됨)
    .then((response)=>{
      console.log(response.data.data.list);
      setState(response.data.data.list);
    });
  },[]);

  return (
    <div>
      {state.map(state=>(
        <li key={state.id}>
          {state.name}
        </li>
      ))}
    </div>
  );
}

export default App;

3.결과

최근 발매음악 100곡을 보여주고 있다
더 이상은 api호출에서부터 헤매고 싶지 않다🤦‍♀️
내 새벽은 소중하니까.....😂😂

저처럼 cors이슈때문에 곤란하신 분들에게 도움이 되었길 바라면서,,