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

용량문제 해결 했습니다.

https://storyinglass.tistory.com/11

Nginx 에서 용량 제한을 높혀주니깐 용량이 큰 이미지도 정상적으로 올라갑니다

해결했습니다. 아직 정확한것은 잘 모르겠지만 1.3mb 이미지는 오류가 나왔고 9kb 크기의 이미지는 오류가 발생하지 않을것으로 봐서 크기 설정에 문제가 있었던것 같습니다

흠 희한하네요.

마지막으로

cors({
  origin: 'https://codingpalette.com',
  credentials: true
})

해보시겠어요? 이것도 안 되면 뭔가 전혀 생각치도 못한 곳에서 오타가 있거나 그럴 수도 있습니다.

/image 라우터를 /post/image로 옮겨본다거나 여러 시도를 해보시는 게 좋을 것 같습니다.

cors({
  origin: true,
  credentials: true
})

하니깐 다시 처음과 같은 오류가 나옵니다 ㅠㅠㅠ

nginx 따로 다른 설정을 해줘야 할까요?

cors() 자체는 /image 라우터에 적용되는 상황인 것 같습니다.

cors({
  origin: true,
  credentials: true
})

로 바꿔보세요.

imageRouter 에서 cors 추가를 해도 오류가 나옵니다.

테스트로 그 밑에 

router.post('/test', (req, res, next) => {
   res. status(200).json({aa : 'ok'})
});

를 만들어서 해봤는데 이거는 또 정상적으로 작동이 됩니다.

const express = require('express');
const multer = require('multer');
const path = require('path');
const fs = require('fs');
const multerS3 = require('multer-s3');
const AWS = require('aws-sdk');
const cors = require('cors')

const { Image } = require('../models');
const { isLoggedIn } = require('./middlewares');

const router = express.Router();

try {
    fs.accessSync('uploads')
} catch (e) {
    console.log('uploads 폴더가 없으므로 생성합니다.')
    fs.mkdirSync('uploads')
}


AWS.config.update({
    accessKeyId: process.env.S3_ACCESS_KEY_ID,
    secretAccessKey: process.env.S3_SECRET_ACCESS_KEY,
    region: 'ap-northeast-2',
});

const upload = multer({
    storage: multerS3({
        s3: new AWS.S3(),
        bucket: 'codingpalette',
        key(req, file, cb) {
            cb(null, `original/${Date.now()}_${path.basename(file.originalname)}`)
        }

    }),
    limits: {fileSize: 20 * 1024 * 1024}, // 20MB

});

router.post('/', cors(), isLoggedIn, upload.array('image'), (req, res, next) => { // 이미지 업로드
    // console.log(req.files);
    res.status(200).json(req.files.map((v) => v.location));
})

router.post('/test', (req, res, next) => {
   res.status(200).json({aa : 'ok'})
});


module.exports = router;

콘솔을 확인하니 처음 오류와 다른 오류가 나옵니다.

Access to XMLHttpRequest at 'https://api.codingpalette.com/image' from origin 'https://codingpalette.com' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

일단 오류 찾기가 좀 힘드네요. imageRouter에서

router.post('/')가 있으실 것 같은데

const cors = require('cors')
router.post('/', cors(), upload.array(), (req, res, next) => {})

이런 식으로 multer 앞에 cors 미들웨어를 넣어보세요. 이렇게 하면 개별 라우터에 각각 cors를 적용할 수 있습니다.

현재 app.js 코드 입니다.

app.use(cors({
    origin: 'https://codingpalette.com',
    credentials: true,
}));

domain: process.env.NODE_ENV === 'production' && '.codingpalette.com'

으로 등록이 되어 있습니다

const express = require('express');
const cors = require('cors');
const session = require('express-session');
const cookieParser = require('cookie-parser');
const passport = require('passport');
const dotenv = require('dotenv');
const morgan = require('morgan');
const path = require('path');
const hpp = require('hpp');
const helmet = require('helmet');



const userRouter = require('./routes/user');
const postRouter = require('./routes/post');
const postsRouter = require('./routes/posts');
const tagRouter = require('./routes/tag');
const imageRouter = require('./routes/image');
const portfolioRouter = require('./routes/portfolio');
const portfoliosRouter = require('./routes/portfolios');
const db = require('./models');
const passportConfig = require('./passport');


dotenv.config();
const app = express();
db.sequelize.sync()
    .then(() => {
        console.log('db 연결 성공')
    })
    .catch(console.error)


passportConfig();

if (process.env.NODE_ENV === 'production') {
    app.set('trust proxy', 1);
    app.use(morgan('combined'));
    app.use(hpp());
    app.use(helmet());
    app.use(cors({
        origin: 'https://codingpalette.com',
        credentials: true,
    }));
} else {
    app.use(morgan('dev'));
    app.use(cors({
        origin: true,
        credentials: true,
    }));
}


app.use('/', express.static(path.join(__dirname, 'uploads')));
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use(cookieParser(process.env.COOKIE_SECRET));
app.use(session({
    saveUninitialized: false,
    resave: false,
    secret: process.env.COOKIE_SECRET,
    proxy: true,
    cookie: {
        httpOnly: true,
        secure: true,
        domain: process.env.NODE_ENV === 'production' && '.codingpalette.com'
    },
}));
app.use(passport.initialize());
app.use(passport.session());


app.get('/', (req, res) => {
    res.send('hello express');
});

app.use('/user', userRouter);
app.use('/post', postRouter);
app.use('/posts', postsRouter);
app.use('/tag', tagRouter);
app.use('/image', imageRouter);
app.use('/portfolio', portfolioRouter);
app.use('/portfolios', portfoliosRouter);


app.listen(5000, () => {
    console.log('서버실행중')
});

codingpalette.com 주소를 cors origin에 추가했는데도 에러가 나는 거죠?? 혹시 cors 미들웨어가 image 업로드하는 라우터보다 위에 위치하는 것 맞나요?