소개

nem2-sdk-typescript-javascript 의 Listener를 사용했을 때, 다음과 같은 에러를 만나지 않을까요?

Access to fetch at ' htp://13.114.200.132:3000/ws ' from origin ' http://localhost:3000 ' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, the request's mode to 'no-cors' to fetch the resource with CORS disabled.

자신의 경험에서 클라이언트 측 (브라우저)에서 리스너를 사용하려고하면 나타납니다.

오류적으로 CORS를 설정해야 하는 것처럼 보이지만 그렇지 않습니다.

클라이언트 측에서 Listener를 사용하는 경우 서버 측 (Node.js) 때와 달리 WebSocket 객체를 주입해야합니다.

예를 들면

예를 들어 Nuxt.js에서 다음과 같은 구성 요소를 만들고 사용했다고 가정합니다.

<template>
  <div style="margin-top: 2rem;">
    <button @click="listenConfirmed" class="button--grey">confirmed</button>
    <pre style="text-align: left; font-size: xx-small;">{{ JSON.stringify(confirmed) }}</pre>
  </div>
</template>
<script>
import { Address, Listener } from 'nem2-sdk'

export default {
  name: 'Account',
  data() {
    return {
      confirmed: []
    }
  },
  methods: {
    listenConfirmed() {
      const listener = new Listener('http://13.114.200.132:3000');
      const address = Address.createFromRawAddress('SCA7ZS-2B7DEE-BGU3TH-SILYHC-RUR32Y-YE55ZB-LYA2');
      listener.open().then(() => {
        listener.confirmed(address).subscribe((x) => {
          this.confirmed.push(x)
        })
      });
    }
  }
}
</script>
<style>
</style>

개발자 도구의 콘솔에 다음과 유사한 오류가 표시된다고 생각합니다.

해결 방법

Listener의 첫 번째 인수에는 ws로 시작하는 URL을, 두 번째 인수에는 WebSocket 객체를 전달합니다.

그래서 다음과 같이 다시 씁니다.

listenConfirmed() {
  const endpoint = 'http://13.114.200.132:3000';
  const wsEndpoint = endpoint.replace('http', 'ws');
  const listener = new Listener(wsEndpoint, WebSocket);
  const address = Address.createFromRawAddress('SCA7ZS-2B7DEE-BGU3TH-SILYHC-RUR32Y-YE55ZB-LYA2');
  listener.open().then(() => {
    listener.confirmed(address).subscribe((x) => {
      this.confirmed.push(x)
    })
  });
}

무언가 트랜잭션을 보내 보면 제대로 얻을 수있었습니다.