codestates / codestates/FilmStorage
[Error] 날씨 정보 API 요청시 cors 요청 실패
- Dominant language
- JavaScript
- Stars
- 5
- Forks
- 5
- PR merge metrics
- No merged PRs in 30d
Description
> 해결된 에러라면 라벨에 'Complete' 를 달아주세요.
> 미해결된 에러라면 라벨을 'In progress' 로 변경해주세요.
### 어떤 에러인가요?
- 날씨 정보 API 요청시 cors 요청 실패 메세지
### 에러 메시지
```
Access to XMLHttpRequest at 'https://api.openweathermap.org/data/2.5/weather?lat=33.472512&lon=126.4910336&units=metric&appid=3ec77581799218a8534c31f41598f3f4' from origin 'https://localhost:3000' 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'.
```
### 에러 핸들링 방법
- withCredentials를 true로 설정시 요청자격과 함께 민감한 정보들이 쿠키에 같이 담겨서 전달 됩니다. 하지만 openWheathear는 Access-Control-Allow-Origin를 * 와일드카드로 처리해 놓아withCredentials 설정을 true로 받게되면 오류를 발생시킵니다. 어차피 필요한 정보는 URl 쿼리에 담겨서 요청 되기 때문에 그에 따른 응답을 받기 때문에 그 이상에 정보를 필요하지 않아 false로 처리 해야 했습니다.
- get 요청시 withCredentials: false, 옵션을 넣어서 요청하여 에러 수정
```js
//변경전
axios.get(url).then((res)
// 변경후
.get(url, {
withCredentials: false,
})
```
### 에러 핸들링을 위해 참고한 레퍼런스 링크
[링크](https://stackoverflow.com/questions/42803394/cors-credentials-mode-is-include)
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.