프론트와 백앤드 사이 라우팅 문제 해결

jar파일을 활용해 프론트와 백앤드를 한 번에 빌드하는 경우 변경사항을 확인하기 위해서 매번 빌드해야함. 그래서 백앤드와 프론트를 따로 돌릴 수 있는 개발환경을 구축하려고함.

프론트 앤드를 npm start를 통해 프로젝트를 실행시키고, 백앤드를 java를 실행시키면 CORS문제가 발생.

CORS( cross-origin requests) 문제란?

통신을 하려는 두 출처가 서로 상이할 경우 발생하는 에러. 기본 정책은 보안상 이유로 교차 HTTP 요청을 제한한다. 따라서 다른 웹 자원에 접근하기 위해선 권한을 부여해야 한다.

해결방법

아래 3가지 방법다 되지만 이번 프로젝트에서는 3번 방법을 택함.

1. React에서 해결방식

아래 코드를 추가. 하지만 http-proxy-middleware가 Typescript를 지원하지 않아서 js파일로 추가. https://github.com/facebook/create-react-app/issues/8273

// src/setupProxy.js
const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: '<http://localhost:8081>',
      changeOrigin: true,
    })
  );
};

하지만 문제를 해결하지 못함.

2. java에서 해결방식

서버측에서 크로스도메인 설정하여 문제를 해결하는 것이 표준화된 방법이라고 함.

Request가 들어오는 Controller에 개별적으로 @CrossOrigin Annotation 지정

@CrossOrigin(origins="*")
@RestController
public class testController {
@GetMapping("/api")
    public String test3(@RequestBody testData data) {
        System.out.println(data.getTest());
        System.out.println(data.getArr());
        return "test api has been returned!\\n";
    }
    @GetMapping("/api/test1")
    public String test() {
        return "test api has been returned!\\n";
    }
}

3. 통합 환경설정

port를 특정주소로 통일하기

Spring 설정

/src/main/resources/application.properties 에 아래 코드 추가