개발일지 - provisional headers are shown

개발을 하면서 크롬에서는 에러가 나지 않았지만 유독 모바일 삼성브라우저에서만 나오는 에러가 있었다. 에러 내용은 아래와 같다.

구글링해 본 결과 provisional headers are shown 이 나오는 경우는 두가지가 있다고 한다.

• addblock이 있는 경우
  이 경우는 addblock을 설치하지 않았으므로 패스
• cors 규칙 위반인 경우
  cors를 결제기능에서만 넣었기 때문에 이 경우에 해당한다고 생각했다. 그래서, cors를 글로벌로 적용하기로 했다.

  /*
    * https://dev-pengun.tistory.com/entry/Spring-Boot-CORS-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0
    * */
    @Bean
    public WebMvcConfigurer webMvcConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping(("/**"));
  //                registry.addMapping("/api/**")
  //                        .allowedOrigins("*")
  //                        .allowedMethods(HttpMethod.POST.name(), HttpMethod.GET.name())
  //                        .allowCredentials(false)
  //                        .maxAge(3600);
  //                registry.addMapping("/level/**")
  //                        .allowedOrigins("*")
  //                        .allowedMethods(HttpMethod.POST.name(), HttpMethod.GET.name())
  //                        .allowCredentials(false)
  //                        .maxAge(3600);
            }
        }; 
  

  글로벌로 webconfig에 bean으로 등록해두면 된다고 해서 등록하고 다시 빌드를 해봤다.
  하지만 여전히 같은 에러가 나왔다. 유독 pending에서 끝나지 않고 request가 끝나지 않았다는 에러 문구만 나왔다.

스택오버플로우에서는 캐시에 있는 리소스를 재사용해서 에러가 나온다고 한다.

그래서 fetch의 header에 'Cache-Control': 'no-cache'를 넣고 다시 테스트를 했다.
결과는 실패다.

결국 pending에서 멈추고 request를 보내지 않는 것을 보고 유추해보면 fetch에서 문제가 있다는 것을 알 수 있었고, fetch가 들어간 function을 하나하나 살펴보기로 했다.

가장 이 문제에 직접적으로 문제가 되는 function으로 inputItem을 찾을 수 있었다.
text리소스는 문제가 없지만 image나 sound에 문제가 있었다.

//문제 변경
const inputItem = async (contents, itemA) => {
  const item = document.createElement(itemA.type);
  item.setAttribute("class", itemA.classAttributeName);
  if (itemA.type == "span") {//아이템이 text일때
    let html = '';
    let classList = contents.classList;
    if(classList.contains('add-li')){//줄 나누고 li 추가
      let word = itemA.text.split('\n');

      if(word.length > 1){
          for(let i=0;i<word.length;i++){
            html += '<li>' + word[i] + '</li>';
          }
      }else{
        html = itemA.text;
      }
    }else{// 줄 나누기
      html = itemA.text.replaceAll('\n','<br>');
    }
    if(classList.contains('one-line')){//한줄 짧은 밑줄
      html = html.replaceAll('_','<span class="blank"></span>');
    }else if(classList.contains('two-line')){//글자 밑에 밑줄
      let result = html.split('_');
      for(let i=0; i<result.length -1; i++){
        if(i%2==0){html = html.replace('_','<span class="word"><strong class="underline">');}else{html = html.replace('_','</strong></span>');}
      }
    }else if(classList.contains('three-line')){//한줄 긴 밑줄
      html = html.replaceAll('_','<span class="blank wd-1"></span>');
    }
    contents.innerHTML +=  html.replaceAll('NOT','<strong>NOT</strong>');// not 강조
  }
  else {//아이템이 image와 audio일때
//    const response = await fetch(itemA.src).then(response => response).catch(error => console.log(error));
//
//    if(response.ok) itemA.type = item.setAttribute("src", itemA.src);
//    else item.setAttribute("src", itemA.alt);
    itemA.type = item.setAttribute("src", itemA.src);
    contents.appendChild(item);
  }
}; //inputItem

else 부분이 audio나 image일 경우인데 audio나 image가 없을 경우 default 값을 넣어주기 위해 한번 확인을 하고 넣으려고 만들었던 기능인데, 이 기능을 주석처리하고 다시 빌드를 해보니 해결이 되었다.

아직 더 알아봐야 하지만 지금 상황으로는 여러번의 request가 겹쳐서 에러가 났다고 밖에 생각할 수 없다. 이 케이스에 대해서 나중에 더 알게 된다면 일지를 수정할 생각이다.