React - CORS에러

리엑트 cors 에러

겪은 일

React에서 Java spring을 통해서 DB에 접근해 데이터를 가져오려고 할 때 Cors에러가 뜬다. 즉 axios를 사용할 때 cors가 뜬다.

그 이유는 자바스크립트에서의 요청은 기본적으로 서로 다른 도메인에 대한 요청을 보안상 제한한다

(브라우저는 기본으로 하나의 서버 연결만 허용되도록 설정되어 있기 때문이다)

해결책 1

react에서 cors에러를 해결하기 위해서는 두가지 방법이 존재한다.

proxy사용하기!!!

프록시란 도메인을 강제로 proxy로 설정한 도메인으로 요청을 보내도록 하는 것이다.

방법

react의 package.json에서 proxy설정을 백엔드 도메인으로 해주면된다.

예를 들어 설명해보자

react의 도메인 : https://ourserverdomain:3000
java spring 도메인 : https://ourserverdomain:8080

일때 package.json에 자신이 사용하는 백엔드 도메인 주소를 proxy로 설정해주면된다.

  "web-vitals": "^2.1.4"
  },
  "proxy":"https://ourserverdomain:8080"
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

위의 방법으로 하면 cors에러가 1차적으로는 해결된다

단!! localhost에서는 동작하지만 서버에서는 cors가 그대로 떠 axios 요청이 제대로 이루어 지지 않는다.

그렇다면 서버에서 동작하려면 어떻게 해야할까?

해결책 2

process.env라는 방식 사용

process.env는 환경변수로 이것을 사용하면 서버 axios를 보낼때 cors에러를 해결할 수 있다.

순서

1. .env파일을 root파일에 생성
2. .env파일에 서버 url설정 (단! 자신의 서버 url뒤에 api/를 붙여주자!!
   • BASE_URL = https://yourserver/api/

위의 방식을 사용한다면 localhost, server에서의 문제를 해결할 수 있을 것이다.
하지만 위의 두가지 방식으로도 해결되지 않는다면 다른 문제가 있을 것이니 찾아보자

다음편 그렇다면 axios는 어떻게 보내야하지??