Failed to load resource: the server responded with a status of 404 (Not Found) (파일업로드시 오류)

Question

파일업로드 하면 오류가 발생합니다. Failed to load resource: the server responded with a status of 404 (Not Found) createError.js:16 Uncaught (in promise) Error: Request failed with status code 404 at createError (createError.js:16:1) at settle (settle.js:17:1) at XMLHttpRequest.handleLoad (xhr.js:61:1) Uncaught (in promise) Error: Request failed with status code 404 at createError (createError.js:16:1) at settle (settle.js:17:1) at XMLHttpRequest.handleLoad (xhr.js:61:1) 콘솔창에 위와 같이 나옵니다. 서버포트 5000번이 맥에서 안되서 5001포트 사용하였고 클라이언트는 3000번포트 프록시 문제인가요? 아니면 경로 문제인가요? 둘다 확인했는데 로그인 정상으로 되고 업로드에서만 문제가 발생합니다. 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 ]); console . log ( "1111" ); axios . post ( '/api/product/image' , formData , config ) . then ( response => { if ( response . data . success ) { console . log ( response . data ); setImages (... Images , response . data . filePath ) } else { alert ( '파일을 저장하는데 실패했습니다.' ) } }) } return ( < div style = { { display : 'flex' , justifyContent : 'space-between' } } > < Dropzone onDrop = { dropHandler } > { ({ getRootProps , getInputProps }) => ( < section > < 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 style = { { display : 'flex' , width : '350px' , height : '240px' , overflowX : 'scroll' } } > { Images . map (( image , index ) => ( < div key = { index } > < img style = { { minWidth : '300px' , width : '300px' , height : '240px' } } src = { `http://localhost:5001/ ${ image } ` } /> )) } ) } export default FileUpload index.js app . use ( '/api/users' , require ( './routes/users' )); app . post ( '/api/product' , require ( './routes/product' )); 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 ;

netkjy6500 · Answer

index.js  에서 app . post ( '/api/product' , require ( './routes/product' )); => app . use ( '/api/product' , require ( './routes/product' )); 로변경하니까 해결은 됐습니다. 파일저장까지는 완료했습니다.