20230524(수)_ JavaScript 문법 종합반 1회차 진행 중
금일 달성 항목
1. JavaScript 문법 종합반 4주차 : 콜백 함수와 동기/비동기 처리 1회차 완강
2. JavaScript 문법 종합반 5주차 : DOM과 클래스, 클로저 1회차 5-6까지 완강
3. git&github 특강 참여
문제 해결 과정 1 - CORS 오류 해결
[문제]
4주차 숙제를 진행하면서 생긴 문제점 입니다. ㅠ Node js에 아래 코드를 입력하고 html로 연결하여 Open with Live Sorce로 실행을 하면
Node js
class HttpError extends Error {
constructor(response) {
super(`${response.status} for ${response.url}`);
this.name = 'HttpError';
this.response = response;
}
}
function loadJson(url) {
return fetch(url)
.then(response => {
if (response.status == 200) {
return response.json();
} else {
throw new HttpError(response);
}
})
}
function narutoIsNotOtaku() {
let title = prompt("애니메이션 제목을 입력하세요.", "naruto");
return loadJson(`https://animechan.vercel.app/api/random/anime?title=${title}`)
.then(res => {
alert(`${res.character}: ${res.quote}.`);
return res;
})
.catch(err => {
if (err instanceof HttpError && err.response.status == 404) {
alert("일치하는 애니메이션이 없습니다. 일반인이시면 naruto, onepiece 정도나 입력해주세요!");
return narutoIsNotOtaku();
} else {
throw err;
}
});
}
narutoIsNotOtaku();
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>테스트 입니다.</title>
<script src="./01.js"></script>
</head>
<body>
<h1>테스트 입니다.</h1>
</body>
</html>
위와같은 팝업은 뜨나 ok 누른 뒤
해당 팝업은 노출되지 않고 있습니다. ㅠ 자꾸만 아래 이미지와 같은 오류가 나오고 있는데요..
CORS에러가 노출
[시도]
구글링, 유튜브로
access-control-allow-origin header 추가
CORS해결
access-control-allow-origin 헤더에 없습니다
등등 ..
마구잡이로 검색을 시작했습니다.
🌐 악명 높은 CORS 개념 & 해결법 - 정리 끝판왕 👏
악명 높은 CORS 에러 메세지 웹 개발을 하다보면 반드시 마주치는 멍멍 같은 에러가 바로 CORS 이다. 웹 개발의 신입 신고식이라고 할 정도로, CORS는 누구나 한 번 정도는 겪게 된다고 해도 과언이
inpa.tistory.com
https://www.youtube.com/watch?v=Nbacd-B54PA&t=1101s
[Web] CORS 동작 방식과 해결 방법
교차 출처 리소스 공유(Cross-Origin Resource Sharing)에 대해 알아보자.
ingg.dev
이것저것 방법은 알았으나. 코드를 어디에 넣는지 모르겠습니다.
[해결]
헤더가 없는 것이 문제 같았습니다.
갑자기 될때도 있었는데
지원 중단된 기능이 사용된다고 하였습니다..
결국엔 헤더를 추가해야하는게 문젠데 어느 코드 위치에 넣어야할지를 몰라서 ㅠㅠ 튜터님께 질문하였습니다.
튜터님께서는 두 가지 링크를 보내주셨습니다..
https://stackoverflow.com/questions/51017702/enable-cors-in-fetch-api
Enable CORS in fetch api
I am getting the following error message that unable me to continue Failed to load https://site/data.json: Response to preflight request doesn't pass access control check: No 'Access-Control-A...
stackoverflow.com
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
Using the Fetch API - Web APIs | MDN
The Fetch API provides a JavaScript interface for accessing and manipulating parts of the protocol, such as requests and responses. It also provides a global fetch() method that provides an easy, logical way to fetch resources asynchronously across the net
developer.mozilla.org
function loadJson(url) {
console.log("test");
return fetch(url, {
mode: "no-cors",
// headers: {
// "Access-Control-Allow-Origin": "*",
// "Access-Control-Allow-Headers": "*",
// },
})
.then((response) => response.json())
.then((data) => {})
.then((response) => {
if (response.status == 200) {
return response.json();
} else {
throw new HttpError(response);
}
});
}중간에 헤더를 지정해서 넣어주었으나 반응이 없어서 결국엔 no-cors로 시도해보니 오류가 사라졌습니다.
그러나 코스자체를 제한하는건 튜터님도 그렇고 다른 블로그에서도 권장하지 않는 방법이기에 다시
no - cors 를 cors로 변환하고 헤더의 링크를 정해서 다시 시도해보라고 하셨습니다.
다시 시도했을때 두가지 에러가 추가로 떴는데요.
429 : 요청이 너무 많이 시도되었을때 뜨는 에러
rate limit : 서버에 호출할 수 있는 횟수의 임계치를 초과하였을때.
그래서 튜터님께서는 오픈 API소스를 제공하는 곳에 들어가서 다시 한번 확인해보라고 하셨습니다.
오픈 API를 확인할 수 있는 곳
https://api-ninjas.com/api/cats
Cats API - API Ninjas
The Cats API provides detailed, qualitative information on every recognized cat breed./v1/catsHTTP GETGet a list of cat breeds matching specified parameters. Returns at most 20 results. To access more than 20 results, use the offset parameter to offset res
api-ninjas.com
The Cat API - Cats as a Service.
A public service API all about Cats, free to use when making your fancy new App, Website or Service.
TheCatAPI.com
다시 확인하였으나 이번엔 Uncaught SyntaxError: Unexpected end of input 에러가 떴습니다.
}) 괄호가 쌍으로 닫혀있지 않으면 생기는 에러라는데.. ㅎ
하나를 수정하니 계속해서 오류가 나왔습니다.
01.js:3 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'status')
속성이 정의되지 않아서?... 대체 제가 뭘 만들고 있는지 혼란이 일어났습니다.
구글링으로.. 내일 다시 시도해보려고 합니다.
[알게 된 점]
세상에는 다양한 에러가 있구나..를 깨달았습니다. 그래도 이걸 해결하면 다음 이슈때는 더 잘 해결할 수 있을 것이라 믿습니다.
특강
git&github 특강 - 강민철 튜터님
- git&github의 정의
- 명령어 모음 (추후 따로 정리)
- 충돌 발생 시 해결방법 (충돌 해결, 다시 커밋)
- 버전 되돌리기 (revert, reset)
- 원격 저장소와 4가지 상호작용 방법 (clon, push, feach, pull)