Vue 시작하기 ⑥

 

 

 

제이슨 데이터를 Vue에서 받아와서 모델로 사용해보자

 

 

 

 

ajax promise를 사용하려 했지만 동작하지 않고

콘솔 창을 확인해보니 에러가 생겼다

 

 

 

CORS정책에 위반된다

 

 

특정 웹서버로부터 콘텐츠를 응답을 받고 특정 시점에 ajax 요청을 동일한 서버에 하면 응답이 잘 온다
하지만 다른 웹서버에 ajax 요청이 가능하냐? 이건 원칙적으로 불가능하다

응답은 a서버로 받아놓고, 요청은 b같은 다른 서버로 보내버리는 게 원칙적으로 막아져 있다
이럴 때 CORS 오류가 뜨는데 이는 교차 출처 리스소 공유라고 한다

 

 

 

 

이건 톰캣 서버로부터 출력받은 내용이 아닌데 ajax요청을 톰캣으로 하고 있기 때문에

CORS 오류가 뜬 것이다

 

 

 

 

해결하는 방법은?

VSC에 있는 이 페이지를 복사해서 톰캣으로 옮기는 방법이 있다

 

 

 

톰캣으로 옮겨서 출처를 같이 하겠다는 의미! 동일 출처로 ajax 요청을 한다

 

 

 

 

원래 빈 모델 참조값이 있었는데 새로운 배열의 참조값을 집어넣음

여긴 왜 this.member로 안 했을까? 여기서 this는 ajax 객체를 가리킨다

그래서 Vue의 참조값을 담아놓은 app를 사용했다

 

만약 app.members 싫으면?

 

 

self라는 상수를 정의해서 이렇게 사용해도 가능하다

 

 

 

 

혹은. then(function(data))여기가 화살표 함수면 바깥으로 빠져나가서 this로 사용이 가능하다

 

 

 

 

CORS 관련해서 한번 더 정리해보자면,

 

다음에서 웹페이지 로딩받은 웹브라우저가 있다고 가정할 때 네이버에 ajax를 요청하면 받아주나?

CORS 정책으로 응답을 해주지 않는다. 또한 자기가 임의로 로딩한 페이지를 서버에 ajax 요청해도 응답하지 않는다

 

그래서 이를 피하기 위해 이클립스에 html을 똑같이 넣어줬다

node.js 서버로 응답받고 테스트하면서 개발해야 하는데 우린 자바 기반의 아파치 톰캣을 사용했다

 

 

 

그럼 우린 아파치 톰캣으로 ajax 요청해야 하는데? 하지만 응답하지 않는다

개발 중 CORS를 무시하도록 이 서버의 설정을 바꿔놓으면 된다

개발 끝나면 개발했던 걸 빌드해서 아파치 톰캣에 심을 것이다 ( 뷰 리액트는 노드 환경에서 개발해야 하므로)

필터 관련이기 때문에 web.xml에 Cross Origin 설정해준다.

 

 

 

잠시 넣었다가 개발이 끝나면 이걸 없애고 톰캣 서버를 Run 해놓는다

 

 

 

 

그리고 데이터를 받아올 때 특정 시점에서 바로 받아오려면?

웹페이지 로딩 시 바로 데이터가 뜨게 하려면

mounted() 또는 created()를 사용하면 가능하다

 

 

 

 

이렇게 작성 후 확인하면 ajax 요청해서 바로 출력이 가능하다

 

 

 

클라이언트 사이드에서 배열 통해서 검색 기능이 사용 가능하다