[React] 애증의 CORS ... 🏴‍☠️

상황

야무지게 CORS를 공부하고 블로그에 정리했지만,,
실제 프로젝트를 진행하면서 CORS가 발생하니까 해결하는 데에 한참 걸렸다.

에러 코드

• 이젠 너무 많이 봐서 외울 지경

Access to fetch at ‘http://localhost/8089/api/auth’ from origin ‘http://localhost:8080’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

발생하는 이유

요청 출처 가 달라서 생긴다.

• 출처란 URL의 프로토콜, 호스트, 포트

해결 방법

• 프론트와 백에서 모두 처리해주었다.

FrontEnd

• axios로 api를 호출할 때 Access-Control-Allow-Origin에 현재 프론트엔드 출처를,
  Access-Control-Allow-Credentials엔 true를 설정해주었다.

// /pages/api/index.js

const getAuth = (token) => axios.create({
    baseURL: BASE_URL,
    headers: {
        "Content-Type": `application/json;charset=UTF-8`,
        "Accept": "application/json",
        "Authorization": "Bearer "+token,
      
        // 추가  
        "Access-Control-Allow-Origin": `http://localhost:3000`,
        'Access-Control-Allow-Credentials':"true",
    }
})

BackEnd

• spring에 웹과 관련된 설정을 해준 config 파일에
  addAllowedOrigin으로 프론트엔드 출처를 추가해주었다.

// WebMvcConfig.java

package com.ssafy.config;

import com.ssafy.common.util.JwtTokenUtil;
import org.springframework.boot.web.servlet.FilterRegistrationBean;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.CorsConfigurationSource;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CommonsRequestLoggingFilter;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

import javax.servlet.Filter;

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
    @Bean
    public CorsConfigurationSource corsConfigurationSource() {
        CorsConfiguration configuration = new CorsConfiguration();
        
       // 추가
       configuration.addAllowedOrigin("http://localhost:3000");
       ...
        
    }
}