리액트 회고록 6. CORS 해제하기 - 1

CORS란?

Cross-Origin Resource Sharing라는 의미로 교차 출처 리소스 공유는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다.

CORS가 발생 이유

다른 사이트와의 리소스 공유를 제한하여 트랜잭션을 보호하기 위해서 SOP(Same-Origin Policy) 정책으로 같은 origin만 리소스 공유가 가능하기 때문에 발생한다.

React-CORS 발생 과정

// client
import React from "react";

function App() {
    const handleOnClick = () => {
        fetch("http://127.0.0.1:4000/user")
        .then((res) => res.json())
        .then((res) => console.log(res))
        .catch((err) => console.log(err));
    }
    return (
        <div>
            <button onClick={handleOnClick}>버튼</button>
        </div>
    );
}

export default App;

// server
const express = require("express");
const logger = require("morgan");
const app = express();
const PORT = 4000;

const data = {
    user: "YHJ",
    age: 27
}

// 미들 웨어
app.use(logger("tiny"));
app.use(express.json());

app.get("/", (req, res) => res.send("hello!!"));
app.get("/user", (req, res) => res.json(data));

app.listen(PORT, () => console.log(`http://localehost:${PORT}`));

버튼을 눌러서 서버와의 통신을 하면 CORS 오류를 만나게 된다. 왜냐하면 클라이언트에서의 리액트는 3000포트를 사용하지만 express에서 실행하는 서버는 4000포트를 사용함으로 origin이 다르기 때문에 CORS 오류가 발생한다.

React-CORS 해결 방법

서버에서 해결하는 방법이 맞다고 생각하지만 서버를 구성할 줄 모르는 상태라면 간단한 공공 API도 테스트 못하는 상황이 올 수가 있으므로 클라이언트에서도 해결 방법을 알아야한다고 생각한다.

// package.json에 추가해주기
 "proxy": "http://127.0.0.1:4000"

클라이언트의 URL을 수정을 해야한다. proxy의 origin이 / 주소가 되기 때문에 /user 경로로 요청을 보내야한다.

// client URL 수정하기
import React from "react";

function App() {
    const handleOnClick = () => {
        fetch("/user")
        .then((res) => res.json())
        .then((res) => console.log(res))
        .catch((err) => console.log(err));
    }
    return (
        <div>
            <button onClick={handleOnClick}>버튼</button>
        </div>
    );
}

export default App;

console을 확인하면 데이터를 확인할 수 있다.