MSA + React | 프론트엔드 설정

react.js

//app.js
import React from "react";
import PostCreate from "./PostPage/PostCreate";

export default function App() {
  return (
    <>
      <div>Create Post</div>
      <PostCreate />
    </>
  );
}


//postCreate.js
import styled from "styled-components";
import React, {useState} from "react";
import axios from 'axios';

export default function PostCreate() {
  const [title, setTitle] = useState('');

  const onSubmit = async (event) => {
event.preventDefault(); //기본값 이벤트 방지
await axios.post('http://localhost:4000/posts', {
  title
});

setTitle(''); //input 데이터를 보낸 후, input 창을 비움.

  };
  // console.log(title);
  return (
    <PostCreateWrapper>
      <PostForm onSubmit={onSubmit}>
        <PostFormGroup>
          <PostLabel>Title</PostLabel>
          <PostInput value={title} onChange= {e=> setTitle(e.target.value)}></PostInput>
        </PostFormGroup>
        <PostButton>Submit</PostButton>
      </PostForm>
    </PostCreateWrapper>
  );
}

const PostCreateWrapper = styled.div``;

const PostForm = styled.form``;

const PostFormGroup = styled.label``;

const PostLabel = styled.div``;

const PostInput = styled.input``;

const PostButton = styled.button``;

해당 코드에서는

input에 값을 입력하고 submit 버튼을 클릭했을 때,

CORS에러가 발생한다. (포트 번호에 대한 문제임으로, 백엔드에서 추가적인 처리가 필요하다.)

image

CORS에러

  • 생기는 이유: 백엔드와 프론트엔드 사이에는 다른 포트로 개발을 진행하고, 이를 API를 통해 연동시킨다. 하지만 보안을 위해 다른 포트의 연결을 기본적으로 막혀있다. 이를 해결하기 위한 방법으로는 클라이언트에서 해결하는 법, 서버에서 해결하는 법으로 나누어져있다.

  • 클라이언트에서 해결하는 방법

가장 간단한 방법은 Proxy 패턴을 이용하는 것입니다. 클라이언트 웹페이지에서 직접 보내는게 아니라, 클라이언트 페이지에서 클라이언트 서버로 요청을 보내고, 클라이언트 서버에서 백엔드 서버로 요청을 보내도록 하는 것입니다. 서버에서 서버끼리 통신할때는 CORS 정책이 적용되지 않기 때문이죠
  • 서버에서 해결하는 방법
- @CrossOrigin 어노테이션 사용하기: Controller단에서 맵핑 메소드에 @CrossOrigin 어노테이션을 붙이는 것입니다
- CorsFilter 사용하기: 서블릿 필터 인터페이스를 이용하는 것입니다. 서버로 들어오는 모든요청을 우선적으로 가로챈다음 적철한 CORS 정책과 Header를 사용하는 것입니다. Access-Control-Allow-Origin, Access-Control-Allow-Credentials, Access-Control-Expose-Headers 등등이 존재합니다.

posts와 comments

  1. npm install cors

  2. npm start

  3. index.js에 다음 코드 추가
const cors = require('cors');
app.use(cors());

이후, 프론트에서 input에 submit event를 주면, 오류 없이 성공적으로 네트워크에 올라가는 것을 볼 수 있다.

image