[React] CORS 해결하기

웹 어플리케이션은 자신의 출처와 동일한 리소스만 불러올 수 있으며, 다른 출처의 리소스를 불러오려면 그 출처에서 올바른 CORS 헤더를 포함한 응답을 반환해야 한다. (두  URL의 프로토콜, 호스트, 포트가 같아야 동일 출처) 따라서 서버와 클라이언트의 포트가 다를 경우 CORS 정책을 우회하는 작업이 필요하다. 1. 서버에서는 클라이언트의 도메인이 접근하는 것을 허용하고, 2. 클라이언트에서는 클라 측 도메인이 아닌 백엔드 측 도메인으로 요청을 보내줘야한다.

 

1. Back-end / SpringBoot에서 @CrossOrigin 어노테이션을 사용하여 모든 도메인에 대해 접속을 허용함

package io.jejewn.controller;

import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@CrossOrigin("*")
public class HelloWorldController {
	@GetMapping("/api/spring")
	public String test() {
		return "Hello, world!";
	}
}

 

2. Front-end /리액트에서 프록시 구축 (npm으로 http-proxy-middleware를 설치한 후 프로젝트의 /src 폴더에 setupProxy.js 파일을 생성)

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

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

 

 

 

위와 같은 경우 브라우저에서 api/spring로 요청하게되면, proxy에 의해 target에 명시된 URL로 요청이 이루어지게 된다.