[NestJS] Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client

Programming/Node.js 2024. 12. 2. 21:00 Posted by 생각하는로뎅
반응형

Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client

 

1. 여러 원인이 있었지만, 공통적인 원인은 서버에서 같은 클라이언트에게 2번 이상 연속으로 응답을 전송하면 발생했다.

 

2. 필자 같은 경우는 아래와 같이 코딩 되어 있었다.

  @Get('/index')
  @Render('index')
  getAddminIndex(@Req() req : Request, @Res() res: Response) {

   	return res.redirect("/admin/login");

  }

 

3. 처음 위 코드만 봤을때 return 한번만 수행하므로 이상이 없어보였다.

 

4. 자세히 살펴보니 @Render('index') 부분에 한번 더 호출한다는 것을 알아냈다.

 

5. 그래서 아래처럼, @Render  을 쓰지 않고, 직접 호출하는 방식으로 작성하여 해결 되었다.

  @Get('/index')
  getAddminIndex(@Req() req : Request, @Res() res: Response) {

    if (해당 조건이면) {
       // 리다이렉트
       return res.redirect("/login");
    } else {
      // index 페이지 Render
      res.render('index');
    }
    
  }

 

반응형

'Programming > Node.js' 카테고리의 다른 글

[NestJS] read excel file With exceljs (DiskStorage)  (0) 2024.12.06
[NestJS] Image file download with Url  (0) 2024.12.06
[NestJS] Handlebars template in hbs(Handlebars)  (0) 2024.11.26
[NestJS] Table leftJoin with Mysql2  (0) 2024.11.24
[NestJS] AWS DB Tunneling With Mysql Setting (터널링 및 Mysql 설정)  (2) 2024.11.24

[NestJS] Handlebars template in hbs(Handlebars)

Programming/Node.js 2024. 11. 26. 02:11 Posted by 생각하는로뎅
반응형

 

 

 

Nest.js 에서 화면 그려주는 부분을 hbs(handlebars) 을 사용하였다.

 

동적으로 화면을 그려주기 위해서, template 를 찾다가, Handlebars.js 를 이용하면 Handlebars template 을 사용할 수 있다는 것을 알게 되었다.

 

1. 내 폴더 구조는 아래와 같았다.

  views
    ㄴindex.hbs

 

 

2. 서버에서 데이터를 받아서 hbs 의 문법을 사용하여 화면을 그렸다.

<html>
<head>
</head>
<body>
  	{{#each list}}
 		<span>{{this.comment}}</span>
	{{/each}}
</body>
</html>

 

 

3. 이제 동적으로 그려주기 위해서  Handlebars template 을 사용하기로 한다.

  

   script 부분에 handlers.min.js 도 추가하고, jquery도 추가한다.

   template 구분은 제일 아래에 위치해서 ajax 결과 반환 후 사용하도록 한다.

 

<html>
<head>
..
    <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.8/handlebars.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
  	{{#each list}}
 		<span>{{this.comment}}</span>
	{{/each}}
    
    <ul class="ul_list">
    </ul>
</body>

...

      $(".classname").click(function () {
      
          $.ajax({
            type: 'POST',
            dataType: 'json',
            data: {
              "key": value
            },
            url: '/api/url',
            success: function (result) {
              var source   = $("#list-template").html();
              var template = Handlebars.compile(source);
              var html = template(result);
              $(".ul_list").html(html);
            }
          });
        
      });

...

<!-- hbs tamplate -->
<script id="list-template" type="text/x-handlebars-template">
	{{#each list}}
          <span>{{this.comment}}</span>
	{{/each}}
</script>
</html>

 

 

4. 음.. 여기까지 아주 좋았다. hbs 문법도 익숙해져서 template 작성하는 부분에 대해서는 막힘이 없었다.

 

  그런데 왠 걸..

 

  에러가 빵빵 터진다. 

 

  나는 분명 list 데이터를 넘겼지만

 

              var source   = $("#list-template").html();
              var template = Handlebars.compile(source);
              var html = template(result);
              $(".ul_list").html(html);

 

 

  template 에서는 아무런 데이터도 노출하지 않았다.

 

<!-- hbs tamplate -->
<script id="list-template" type="text/x-handlebars-template">
	{{#each list}}
          <span>{{this.comment}}</span>
	{{/each}}
</script>

 

 

  위치도 바꿔보고, id 도 틀렸는지 확인도 하고, 삽질을 하고 나서야 답을 찾을 수 있었다.

 

<!-- hbs tamplate -->
<script id="list-template" type="text/x-handlebars-template">
\{{#each list}}
          <span>\{{this.comment}}</span>
\{{/each}}
</script>

 

  문법 앞에 역슬러쉬(\) 를 붙여 줘야 했던 것이었다. 

 

 

반응형

'Programming > Node.js' 카테고리의 다른 글

[NestJS] Image file download with Url  (0) 2024.12.06
[NestJS] Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client  (0) 2024.12.02
[NestJS] Table leftJoin with Mysql2  (0) 2024.11.24
[NestJS] AWS DB Tunneling With Mysql Setting (터널링 및 Mysql 설정)  (2) 2024.11.24
[MongoDB] 랜섬웨어 (READ__ME_TO_RECOVER_YOUR_DATA)  (0) 2024.04.06

[AWS/Linux] pm2: command not found (ec2)

Linux/AWS 2024. 11. 25. 07:18 Posted by 생각하는로뎅
반응형
에러

 

sudo ln -s "$(which pm2)" /usr/bin/pm2
정상

 

반응형

'Linux > AWS' 카테고리의 다른 글

[AWS] EC2 Key-Pair PEM 생성  (0) 2023.03.14
 

티스토리툴바