xhr.js:178 GET http://localhost:3000/api/users/auth 504 (Gateway Timeout)
미해결
따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
계속 504에러가 떠서 온갖 검색을 다하여 따라해봐도 되지않았습니다. 그래서 새로 다운받아서 정말 한글자한글자 비교해가며 다시 해보았더니 사진이 잘 들어왔습니다! 다음것을 따라라치려고 vs코드로 돌아왔다가 다시한번 확인차 페이지를 봤더니 또다시 504에러가 뜹니다..! 분명히! 잘 됬는데 사진도 들어왔는데!! 꿈을 꾼건가요 제가?? 이게 되다가 안되는 경우도 있나요??? ㅠㅠ GET http://localhost:3000/api/users/auth 504 (Gateway Timeout) dispatchXhrRequest @ xhr.js:178 xhrAdapter @ xhr.js:12 dispatchRequest @ dispatchRequest.js:52 Promise.then (async) request @ Axios.js:61 Axios.<computed> @ Axios.js:76 wrap @ bind.js:9 auth @ user_actions.js:31 (anonymous) @ auth.js:14 commitHookEffectListMount @ react-dom.development.js:19731 commitPassiveHookEffects @ react-dom.development.js:19769 callCallback @ react-dom.development.js:188 invokeGuardedCallbackDev @ react-dom.development.js:237 invokeGuardedCallback @ react-dom.development.js:292 flushPassiveEffectsImpl @ react-dom.development.js:22853 unstable_runWithPriority @ scheduler.development.js:653 runWithPriority$1 @ react-dom.development.js:11039 flushPassiveEffects @ react-dom.development.js:22820 performSyncWorkOnRoot @ react-dom.development.js:21737 (anonymous) @ react-dom.development.js:11089 unstable_runWithPriority @ scheduler.development.js:653 runWithPriority$1 @ react-dom.development.js:11039 flushSyncCallbackQueueImpl @ react-dom.development.js:11084 flushSyncCallbackQueue @ react-dom.development.js:11072 unbatchedUpdates @ react-dom.development.js:21909 legacyRenderSubtreeIntoContainer @ react-dom.development.js:24757 render @ react-dom.development.js:24840 ./src/index.js @ index.js:20 __webpack_require__ @ bootstrap:784 fn @ bootstrap:150 1 @ serviceWorker.js:135 __webpack_require__ @ bootstrap:784 checkDeferredModules @ bootstrap:45 webpackJsonpCallback @ bootstrap:32 (anonymous) @ main.chunk.js:1 createError.js:16 Uncaught (in promise) Error: Request failed with status code 504 at createError (createError.js:16:1) at settle (settle.js:17:1) at XMLHttpRequest.handleLoad (xhr.js:61:1) 콘솔창에 뜨는 빨간 에러 코드입니다. 사진을 올리기 전에도 계속해서 떠있습니다.!!! 분명히 이 에러가 없었는데 갑자기 떠서 원인을 더 모르겠습니다 !! ㅠㅠ +동영상에서는 product.js파일에서 req.json이라고 되어있었는데 다른게시글을 보고 req.json을 res.json로 고쳐야한다는 것을 보고 고치고 새로 npm run dev를 했습니다. 그랬더니 이번엔 GET http://localhost:5000//var/folders/xr/kqrr20dn4yv307hpyc916qfr0000gn/T/2e37de435ad620ba0840cef7c263dd65 404 (Not Found) 이렇게 404에러가 뜹니다! upload ( req , res , ( err ) => { if ( err ) { return res . json ({ success : false , err }) } return res . json ({ success : true , filePath : res . req . file . path , fileName : res . req . file . filename }) }) <FileUpload.js코드> import React , { useState } from 'react' ; import Dropzone from 'react-dropzone' ; import { Icon } from 'antd' import axios from 'axios' ; function FileUpload () { const [ Images , setImages ] = useState ([]) const dropHandler = ( files ) => { let formData = new FormData (); const config = { header : { 'content-type' : 'multipart/fomr-data' } } formData . append ( "file" , files [ 0 ]) axios . post ( '/api/product/image' , formData , config ) . then ( response => { if ( response . data . success ) { setImages ([... Images , response . data . filePath ]) } else { alert ( '파일저장실패' ) } }) } return ( < div style = { { display : 'flex' , justifyContent : 'space-between' } } > < Dropzone onDrop = { dropHandler } > { ({ getRootProps , getInputProps }) => ( < div style = { { width : 300 , height : 240 , border : '1px solid lightgray' , display : 'flex' , alignItems: 'center' , justifyContent: 'center' } } { ... getRootProps () } > < input { ... getInputProps () } /> < Icon type = 'plus' style = { { fontSize : '3rem' } } /> </ div > ) } </ Dropzone > < div style = { { display : 'flex' , width : '350px' , height : '240px' , overflowX : 'scroll' } } > { Images . map (( image , index ) => ( < div > < img style = { { minWidth : '300px' , height : '240px' } } src = { `http://localhost:5000/ ${ image } ` } /> </ div > )) } </ div > </ div > ); } export default FileUpload ; <product.js코드> const express = require ( 'express' ); const router = express . Router (); const multer = require ( 'multer' ); //================================= // product //================================= var storage = multer . diskStorage ({ // destination: function (req, file, cb) { // cb(null, 'uploads/'); // }, // filename: function (req, file, cb) { // cb(null, `${Date.now()}_${file.originalname}`) // } }) var upload = multer ({ storage : storage }). single ( "file" ) router . post ( '/image' , ( req , res ) => { //가져온 이미지를 저장을 해주면 된다. upload ( req , res , ( err ) => { if ( err ) { return req . json ({ success : false , err }) } return res . json ({ success : true , filePath : res . req . file . path , fileName : res . req . file . filename }) }) }) module . exports = router ;
- 504에러
- react
- nodejs
- mongodb
- 웹앱
- redux