스프링 부트

config 패키지를 생성 후 WebMvcConfig클래스 생성 해준다.

package com.example.test.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

// 스프링 빈으로 등록
@Configuration
public class WebMvcConfig implements WebMvcConfigurer {


    @Override
    public void addCorsMappings(CorsRegistry registry) {
        // 모든 경로에 대해
        registry.addMapping("/**")
                // Origin이 http://localhost:3000에 대해
                .allowedOrigins("http://localhost:3000")
                // GET, POST, PUT, PATCH, DELETE, OPTIONS 메서드를 허용한다.
                .allowedMethods("GET", "POST", "PATCH", "DELETE", "OPTIONS");
    }
}

이제 return할 수 있는 컨트롤러를 만들어준다.

@RestController
@Slf4j
public class HelloController {
    @GetMapping("/api/test")
    public String test() {
        return "rest api result return!";
    }
  }

리액트

npm i http-proxy-middleware를 설치해주고 axios를 사용했다면 npm i axios를 해준다.
프론트하고 협업시 git에서 pull하면 node_modules가 없기 때문에 npm i를 해줘야 한다.

그리고 src아래에 setupProxy.js를 만들어준다.

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

module.exports = function (app) {
  app.use(
      "/",
      createProxyMiddleware({
          target: "http://localhost:8080",
          changeOrigin: true,
      })
  );
};

import React, { useState, useEffect } from "react";
import "./App.css";
import axios from "axios";

function App() {
  const [email, setemail] = useState();
  const [psw, setpsw] = useState();
  const [testStr, setTestStr] = useState("");

  function callback(str) {
      setTestStr(str);
  }

  useEffect(() => {
      axios
          .get("/api/test")
          .then((Response) => {
              callback(Response.data);
          })
          .catch((Error) => {
              console.log(Error);
          });
  }, []);

  return (
      <div className="App">
          <div>
              api/test == {">"}
              {testStr}
          </div>
      </div>
  );
}

export default App;

이제 npm start를 해주고 맞는 url을 보내주면

이렇게 백엔드와 연결되서 잘 나오는 것을 볼 수 있다!