[React] axios cors 에러 해결방법

React + node express + mysql을 사용하여 게시판 프로젝트 진행 중, CORS 에러가 발생하여 따로 내용 정리를 한다.

 

CORS란?

Cross Origin Resource Sharing의 약자로,

현재 웹페이지 도메인에서 다른 웹페이지 도메인으로 리소스가 요청되는 경우를 말한다.

예를 들면, 웹페이지인 http://web.com에서 API 서버 URL인 http://api.com 도메인으로 API를 요청하면

http 형태로 요청이 되므로 브라우저 자체에서 보안 상 이유로 CORS를 제한하게 되는 현상을 말합니다.

 

 

반응형

 

CORS 해결방법

CORS 해결방법은 클라이언트에서 처리하는 방법과 서버에서 처리하는 방법이 있다.

그런데 클라이언트에서 처리하는 경우 안 되는 케이스도 있어서 가능하면 서버에서 처리하는 방법이 안전하다.

 

1. 클라이언트에서 처리(withCredentials 옵션 사용)

둘 중에 한 가지 방법을 사용하면 된다.

 

[axios 전역 설정]
axios.defaults.withCredentials = true;

[axios 옵션 객체로 넣기]
axios.post(`${ServerURL}/${API}`, {},
{
	withCredentials: true // 쿠키 cors 통신 설정
}).then(response => {
	console.log(response);
});

 

 

2. 서버에서 처리(Access 허용)

 

cors 모듈 설치가 선행되어야함
npm i cors

const cors = require('cors');

const express = require('express')
const cors = require('cors');

const app = express();

let corsOptions = {
  origin: "*", // 출처 허용 옵션
  credential: true, // 사용자 인증이 필요한 리소스(쿠키 ..등) 접근
};

app.use(cors(corsOptions));

 

---

참고: https://inpa.tistory.com/entry/AXIOS-%F0%9F%93%9A-CORS-%EC%BF%A0%ED%82%A4-%EC%A0%84%EC%86%A1withCredentials-%EC%98%B5%EC%85%98