xhr.js:178 GET http://local... - 인프런 | 커뮤니티 질문&답변

계속 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;

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

xhr.js:178 GET http://localhost:3000/api/users/auth 504 (Gateway Timeout)