인프런 커뮤니티 질문&답변

API 서버 동작을 확인하는 데에 todoApi.js를 확인해 봤는데 어디가 문제인지 모르겠네요

내용은 다음과 같습니다

import axios from 'axios';
export const API_SERVER_HOST = 'http://localhost:8080'

const prefix = '${API_SERVER_HOST}/api/todo'

export const getOne = async (tno) => {
    const res = await axios.get('${prefix}/${tno}')

    return res.data
}

export const getList = async (pageParam) => {
    const {page,size} = pageParam

    const res = await axios.get('${prefix}/list', {params:{page,size}})

    return res.data

}

const res = await axios.get('${prefix}/list', {params:{page,size}})

이 부분을 
const res = await axios.get(`${prefix}/list`, {params: {page:page,size:size }})

따옴표가 아니라 백틱으로 감싸야 합니다.
다른 곳도 수정할 부분이 보이실 겁니다.
강의자료에 첨부된 소스파일과 비교해서 보셔도 될 거 같네요.

감사합니다. 그런데 이번에는 별개 에러가 나왔는데요 네트워크 에러라고 나오길래 조사해 보니까 이는 크롬에서의 문제인 거라 상관 없을 거 같다는데 맞을까요

?

다시 실행해 봤는데 네트워크 통신을 보면 referer쪽이 8080이 아닌 3000으로 동작되는 게 문제인가요?

CORS 문제인 게 아닐까 해도 어떻게 대응해야 할지 모르겠습니다

답변 부탁드립니다 관리자 도구 네트워크 탭 쪽 내용을 아래에 첨부하겠습니다

리액트에서 8080으로 동작하는 api서버를 호출하는 부분이 문제로 보입니다

우선은 브라우저에서 호출 주소가 정상적인지 확인해 보세요

이후에 CORS 문제가 발생하면 다시 알려주세요

React 는 npm start 하면 http://localhost:3000 번으로 동작됩니다.

Spring Boot 는 컴파일로 구동시키면 http://localhost:8080 으로 동작됩니다.

axios 로 Spring Boot 의 경로를 호출합니다.

일단 Spring Boot 가 동작중인지 확인이 되어야 합니다.

저의 application.yml 파일

spring:
  application:
    name: mallapi
  datasource:
    url: jdbc:mariadb://localhost:3306/malldb
    username: codefox
    password: Codefullfox!!
    driver-class-name: org.mariadb.jdbc.Driver
  jpa:
    hibernate:
      ddl-auto: update
    show-sql: true
    properties:
      hibernate:
        format_sql: true
        show_sql: true
        dialect: org.hibernate.dialect.MariaDBDialect
        use_sql_comments: true
  servlet:
    multipart:
      max-request-size: 30MB
      max-file-size: 10MB
org:
  zerock:
    upload:
      path: upload
server:
  port: 8080
  ssl:
    enabled: false
    key-store: classpath:keystore.p12
    key-store-password: changeit
    key-store-type: PKCS12
    key-alias: tomcat

ssl 설정은 클라우드 서버에서 https://www.abc.com 으로 접속할 때 SSL 인증서가 설치되어 있을 때의 경우이며 , 강의에서는 노트북/데스크탑 PC에서 컴파일 하는 것이므로 enabled: false 로 해야 정상동작

SSL 인증서 설정 적용하는 건 https://link2me.tistory.com/2463 를 참조

CORS 문제를 해결하기 위한 코드
강의 파일에서는 CustomServletConfig.java 파일을 참고하세요.

package org.zerock.mallapi.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.format.FormatterRegistry;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
import org.zerock.mallapi.controller.formatter.LocalDateFormatter;

@Configuration
public class CorsMvcConfig implements WebMvcConfigurer {
    @Override
    public void addFormatters(FormatterRegistry registry) {
        registry.addFormatter(new LocalDateFormatter());
    }

    public void addCorsMappings(CorsRegistry corsRegistry) {
        corsRegistry.addMapping("/**")
                .allowedOrigins("http://localhost:3000", "https://spb.abc.com")
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                .maxAge(300)
                .allowedHeaders("Authorization", "Content-Type","Cache-Control");
    }
}

ch6 강의 듣고 있는 중이라 제가 답변드릴 수 있는 건 여기까지 입니다.

아무래도 React Router 설정의 문제인 거 같은데 어떻게 대응해야 할지 모르겠네요ㅠㅠ