[리액트 + 스프링 연동] CORS 오류 해결

Access to XMLHttpRequest at 'http://localhost:8080/api/hello' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

 

이와 같은 오류가 발생하는 경우 해결책을 찾는 게시글이다.

 

 

 

 

HelloWorldController.java

package com.dotori.daram.Controller;

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

@RestController
public class HelloWorldController {

    @GetMapping("/api/hello")
    public String test() {
        return "Hello World!";
    }
}

 

App.js

import React, {useEffect, useState} from 'react';
import axios from 'axios';
import {BrowserRouter as Router, Route, Switch} from "react-router-dom";
import LandingPage from "./Components/LandingPage";

export default function App() {
  return (
      <Router>
          <Switch>
              <Route path="/" component={LandingPage}/>
          </Switch>
      </Router>
  );
}

 

LandingPage.js

import React, {useEffect, useState} from 'react';
import axios from 'axios';

function LandingPage() {
    const [hello, setHello] = useState('')

    useEffect(() => {
        axios.get('http://localhost:8080/api/hello')
            .then(response => setHello(response.data))
            .catch(error => console.log(error))
    }, []);

    return (
        <div>
            백엔드에서 가져온 데이터는 {hello} 입니다.
        </div>
    );
}

export default LandingPage;

 

실행하면 다음과 같은 문제가 발생한다.

 

Access to XMLHttpRequest at 'http://localhost:8080/api/hello' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

 

CORS는 서로 다른 출처 간에 리소스를 전달하는 방식을 제어하는 체계이며,

CORS 요청이 가능하려면 서버에서 특정 헤더인 Access-Control-Allow-Origin과 함께 응답할 필요가 있다.

CORS 정책을 위반하여 서로 다른 출처를 가진 상태에서

무언가 요청하게 되면 브라우저가 보안 상의 이유로 차단해버리는 것이다.

예를들면, 클라이언트 포트가 3000이고 서버 포트가 8080일 때.

클라이언트에서 서버로 리소스 요청했을 때 CORS 에러 메시지가 클라이언트 콘솔에 뜨고 데이터를 주지 않는 것이다.

 

스프링에서 이 CORS 문제를 해결할 수 있다.

CORS 정책을 설정해 줄 대상에 @CrossOrigin 어노테이션을 사용해도 되지만

매번 작성하기 번거로우므로 전역적으로 config 파일에서 CORS 정책을 설정하는 법을 작성하였다.

 

다음과 같이 config 패키지에 Config 파일을 생성하여 CORS 정책을 작성하면 된다.

@Configuration 어노테이션을 작성해야 스프링이 이 파일을 설정파일로 등록해주니 잊지말고 작성하자.

 

WebConfig.java

package com.dotori.daram.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 WebConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry
                .addMapping("/api/**")
                .allowedOrigins("http://localhost:3000")
                .allowedMethods("GET", "POST", "PUT", "PATCH", "DELETE", "OPTIONS")
                .allowedHeaders("*")
                .allowCredentials(true);
    }
}