리액트,스프링 axios 연결 CORS 오류 / has been blocked by CORS policy: No 'Access-Control-Allow-Origin'

미니 프로젝트 중에 처음으로 axios를 사용하게 되었는데 리덕스랑 연결해야하나 정말 헷갈리고 일단 파일을 새로 해서

악시오스 미들웨어 코드를 받아 적용 시키고 url, 변수정도 수정해서 요청을 보내보았다.

 

 

에러를 검색해보니 관련 자료들이 많이 나왔는데 공식 문서에 있는 리액트 관련 사항들을 보려한다.

문서에는 수동으로 프록시 구성하기로 되어있는데 자체적으로 프록시 미들웨어를 연결하며 많은 분들과 타 블로그도 이용하는걸로 보니 이걸로 준비해보자!

 

 

1. 패키지 설치

먼저 http-proxy-middleware를 설치해주자!

$ npm install http-proxy-middleware --save
$ # or
$ yarn add http-proxy-middleware

 

2. 파일 생성 후 코드 복.붙

src/setupProxy.js

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

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

 

자 벌써 모든게 완료 됐다 실행해보자!

 

 

 

 

 

 

안된다!

 

 

 

다음주 월요일에 팀원들 모여서 얘기를 나눠보아야겠다!

사이트를 들어가서 확인해봐도 네트워크 css 부분은 

Access-Control-Allow-Origin: * 로 누구나 사용 가능하다는 표시가 됐는데

 

 

오른쪽 보시면 중요한 Fetch 부분이 비어있다

 

그리고 리액트 내 로컬호스트에 들어가니 View source라고 나온다..

위에 방법으로 해결 된다는데 이상하다 싶어 다른 API를 갖고 와봤다!!

 

 

+ 빗썸 API 연결

 

데이터가 바로 들어왔다ㅣ! 진짜 눈 깜빡할 사이에 들어와 버렸다!

그럼 문제는 무엇인가 우리팀 API였던것이었나~

일요일날은 다들 하루 쉬는날이니 조금 더 고쳐보고

월요일날 확인해봅시당

 

 

뭔가 빗썸 API를 받아오니까 데이터가 많아보이는게 전문가가 된, 개발자가 된 느낌이다.

 

https://create-react-app.dev/docs/proxying-api-requests-in-development/

Proxying API Requests in Development | Create React App