상세페이지에서 get이 안되는 경우

Question

postman으로 테스트 했을 때 product/${id} db가 잘 불러와지는데 index.js/product파일에서는 products가 null에 머물러있습니다.. import { useParams } from " react-router-dom "; import axios from " axios "; import { useEffect , useState } from " react "; import " ./index.css " function ProductPage () { const { id } = useParams () ; const [ products , setProduct ] = useState ( null ) ; useEffect ( function () { axios . get ( ` https:/localhost:8080/products/ ${ id }` ) . then ( function ( result ) { setProduct ( result . data . products ) ; console . log ( result ) ; } ) . catch ( function ( error ) { console . log ( error ) ; } ) }, [ id ]) ; if ( products === null ) { return < h1 > 값을 받아오는 중입니다... } return ( < div > < div id = " image-box " > < img src ={ " / " + products . imageUrl } alt = " product-img " /> < div id = " profile-box " > < img src = " /images/icons/avatar.png " alt = " seller-img " /> < span >{ products . seller } < div id = " contents-box " > < div id = " name " >{ products . name } < div id = " price " > $ { products . price } < div id = " create-at " > 생성된 날짜가 들어갈예정: 2020.1.1. < div id = " discription " >{ products . description } ) ; } export default ProductPage ;

그랩 · Answer

https:localhost -> http://localhost로 변경해보시겠어요? 현재 node.js 서버는 https 프로토콜 설정이 따로 되어있지 않기 때문에 http 프로토콜로만 접근이 가능합니다 :)

김도토리 · Answer

get형식으로 받아온다는 걸 방금 캐치해서 포스트맨으로 데이터를 요청했는데 데이터는 잘 받아집니당..

김도토리 · Answer

localhost: 8080 / products / 3 에서 이런 데이터들이 보이는데 react를 실행시켜서 localhost: 3000 / products / 3 에 접속하면 404에러가 뜨는데 왜그럴까요... import { useParams } from " react-router-dom "; import axios from " axios "; import { useEffect , useState } from " react "; import " ./index.css " function ProductPage () { const { id } = useParams () ; const [ product , setProduct ] = useState ( null ) ; useEffect ( function () { axios . get ( ` http:/localhost:8080/products/ ${ id }` ) . then ( function ( result ) { setProduct ( result . data . product ) ; console . log ( result ) ; } ) . catch ( function ( error ) { console . log ( error ) ; } ) }, [ id ]) ; if ( product === null ) { return < h1 > 값을 받아오는 중입니다... } return ( < div > < div id = " image-box " > < img src ={ " / " + product . imageUrl } alt = " product-img " /> < div id = " profile-box " > < img src = " /images/icons/avatar.png " alt = " seller-img " /> < span >{ product . seller } < div id = " contents-box " > < div id = " name " >{ product . name } < div id = " price " > $ { product . price } < div id = " create-at " > 생성된 날짜가 들어갈예정: 2020.1.1. < div id = " discription " >{ product . discription } ) ; } export default ProductPage ;

김도토리 · Answer

콘솔창에서는 프로토콜에러라고 뜨는데 어느부분의 문제인지 모르겠습니다...