외부사이트 html 코드 가져오기

 

1. 외부사이트의 html을 어떻게 가져올까

외부사이트 url을 통해 html 코드를 가져오고싶었다.

구글에서 찾아본것 중 vue에서 잘 돌아가는 것으로 적용했다.

아마 내가 vue가 처음이라 잘 적용을 하지 못하는 것도 있을 듯하다.

2. 예시 코드

자바스크립트 코드이다.

test (url) {
  var optionAxios = {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
          'Access-Control-Allow-Origin': '*',
          'Access-Control-Allow-Methods': 'GET,PUT,POST,DELETE,OPTIONS',
          'Access-Control-Allow-Headers': 'Content-Type, Authorization, Content-Length, X-Requested-With'
        }
  }
  this.$axios.get('https://cors-anywhere.herokuapp.com/' + url, optionAxios)
    .then((response) => {
      var htmlText = response.data;
      console.log(htmlText);
    })
},

구글에서 찾아본 것중에 대부분은 cors 오류때문에 제대로 html코드를 가져오지 못했다.

이 방법은 옵션을 줘서 가져오게끔 되어있어서 cors 오류가 나지 않아서 이 방법으로 적용했다.

알고보니 axios 이게 크롤링 방법이라 하더라. 크롤링 자체가 외부html코드를 가져오는 건데 내가 원하는거랑 같은거였다. 뜻하지않게 크롤링을 배워버렸네.

3. 주기적인 반복

더 나아가 저 소스를 주기적으로 반복시키고 싶었다. 그래서 settimeout을 이용해 1분마다 한번씩 하려했는데 몇번 테스트하다가 오류가 났다.

429 에러가 나면서 Too Many Requests 라는 내용이 떴다. 알고보니, this.$axios.get('https://cors-anywhere.herokuapp.com/' + url, optionAxios) 이 부분에서 해당 https://cors-anywhere.herokuapp.com/ 여기로 요청이 한시간에 200번 이상이 들어가면 저런 에러가 뜬다.

나는 1분마다 7개의 요청을 보냈었고, 테스트하다가 많은 요청을 보내서 저런 에러가 뜨는거였다. ㅜㅠ

그래서 자동으로 1분마다 돌게는 못하고 새로고침할때만 외부html코드를 가져오게했다.

vue 처음하느라 엄청 삽질하고 있는데, 급 만들어보고싶은 사이트가 있어서 대충 만들어봤다. 다시 강의 이어서 공부해봐야겠다.