codestates / codestates/Senna-server
[Error] blocked by cors policy
- Dominant language
- JavaScript
- Stars
- 0
- Forks
- 0
- PR merge metrics
- No merged PRs in 30d
Description
### 어떤 에러인가요?
서버-클라이언트 통신간 cors에러 발생

### $ 터미널의 에러 코드를 여기 넣어주세요.
```js
//cors 미들웨어 설정 부분
app.use(cors({
origin: true,
credentials: true,
methods: 'GET, POST, PUT, PATCH, DELETE, OPTIONS'
}));
```
```js
//normalSearch controller 일부분
const search = req.query.sch;
if(!search) {
return res.status(400).send('query가 들어오지 않았습니다.')
}
try{
// * 검색어와 일치하는 게시물 찾기 *
const postings = await Posting.find({$or: searchFd}).where('status').equals('true').sort('-created_at')
return res.send({
word: search,
data: postings,
message: '검색 결과입니다.'
})
} catch(err) {
res.status(err.status || 500).send(err.message || 'error')
}
```
```js
//hotKeyword controller 부분
const hotKeyword = async (req, res) => {
// * search count가 가장 많은 keyword 찾기 *
Search.find().sort('-searchcount').limit(1).then(
(result) => {
res.status(200).send({
keyword: result[0].hashtag,
message: '인기 검색어'
})
}
)
}
```
### 에러 핸들링 방법
가정1) cors 미들웨어 적용 문제인가
- 오류 메세지가 cors 에러라서 서버에서 cors 미들웨어 수정이 있었나 했지만 에러 발생전 코드와 동일하게 적용되어 있다.
(새로 배운 사실: 배포시에 서버가 꺼져도 cors 에러가 발생된다.)
가정2) s3/cloudFront cors 세팅
S3 버킷에 cors 세팅을 하여 response header에 origin이 설정될 수 있게 해보았지만 여전히 cors 에러가 발생한다.
cors 에러라면 모든 라우터 서버 통신이 안되야 하는 것 같은데 간헐적으로 통신이 되었다가 502 에러까지 나는 상황이다.
cors 셋팅을 해주지 않아서 발생된 에러는 아닌 것 같다.
```
[
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"GET",
"PUT",
"POST",
"DELETE",
"HEAD"
],
"AllowedOrigins": [
"https://*.senna.world"
],
"ExposeHeaders": [
"x-amz-server-side-encryption",
"x-amz-request-id",
"x-amz-id-2",
],
"MaxAgeSeconds": 3000
}
]
```
참고자료들
- https://docs.aws.amazon.com/ko_kr/sdk-for-javascript/v2/developer-guide/cors.html
- https://blog.fakecoding.com/archives/aws-cloudfront-cors/
- https://www.enteroa.com/2020/11/05/s3-%EB%B2%84%ED%82%B7-cors-%EC%84%A4%EC%A0%95-json/
가정3) 서버 코드의 문제인가
ec2, s3를 다시 생성해보고 로드밸런서 설정도 다시 해보았지만 여전히 핸들링 되지 않았고 502 gateway도 간헐적으로 나타났다. aws 공식문서에 502 에러 발생 해결방안을 보던 중 수정한 코드가 충돌해서 발생한 서버쪽 문제인가 의심되었다.
함께 에러 핸들링한 나라님과 수정 전 코드로 되돌려 재배포 진행하였더니 이상 없이 작동되었다.
참고 자료들
- https://aws.amazon.com/ko/premiumsupport/knowledge-center/load-balancer-http-502-errors/
- https://sosmt.tistory.com/1322
에러 났던 코드의 구조를 바꿔서 업데이트 된 코드로 배포는 마쳤지만 아직 정확한 원인을 파악하지 못했다. (더 알아보기)
```
// 현재 해본 코드 테스트
// hotkeyword에 try-catch 구문을 추가해봤더니 정상작동됨
// normalsearch의 try-catch 구문에서 if-else로 바꿔봤더니 정상 작동됨
```
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.