# 다른 도메인에서 커스텀 Discourse 프론트엔드 앱과 함께 MessageBus 사용

**URL:** https://meta.discourse.org/t/using-messagebus-with-a-custom-discourse-frontend-app-on-a-different-origin/142904
**Category:** Development
**Created:** [2월 28, 2020, 5:27오후 UTC](https://meta.discourse.org/t/using-messagebus-with-a-custom-discourse-frontend-app-on-a-different-origin/142904 "2020-02-28T17:27:29Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![jamesmarkcook](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jamesmarkcook/32/168563_2.png) [@jamesmarkcook](https://meta.discourse.org/u/jamesmarkcook)
#### Post date: [2월 28, 2020, 5:27오후 UTC](https://meta.discourse.org/t/using-messagebus-with-a-custom-discourse-frontend-app-on-a-different-origin/142904/1 "2020-02-28T17:27:29Z")

</div>

혹시 같은 작업을 시도 중이시거나 도움이 필요하신 분이 계실까 봐 여기에 기록해 두겠습니다.

현재 저는 React 프론트엔드와 Discourse 백엔드, 그리고 일부 Discourse 기능을 커스터마이징하는 플러그인을 함께 개발하고 있습니다. 커스텀 프론트엔드 앱에서 MessageBus를 작동시키고자 했지만, 프론트엔드가 Discourse와 다른 오리진에서 서빙되므로 CORS 문제를 겪었습니다.

MessageBus 환경에서는 MessageBus가 기본적으로 Discourse의 기본 Ember 프론트엔드와 함께 작동한다고 가정하기 때문에, Discourse가 `Access-Control-Allow-Origin` 헤더를 `Discourse.base_url_no_prefix`로 설정하고 있음을 확인했습니다.

[MessageBus GitHub README](https://github.com/discourse/message_bus/blob/ab67220a797388e12c980b14ced0cc87fc5a8bc9/README.md#adding-extra-response-headers)에 문서화된 대로, MessageBus 환경에 추가 헤더를 넣을 수 있으며, Discourse의 MessageBus 초기화 프로그램(initializer)이 정확히 그렇게 하고 있으며 여기서 `Access-Control-Allow-Origin`이 `Discourse.base_url_no_prefix`로 설정됩니다.

이를 커스터마이징하기 위해 플러그인에 다음 코드를 추가했습니다:

```ruby
  MessageBus.extra_response_headers_lookup do |env|
    env["__mb"][:extra_headers].merge({
      "Access-Control-Allow-Origin" => "http://your-custom-domain.com"
    })
  end

```

이 방식은 Discourse 초기화 프로그램에서 `setup_message_bus_env`를 호출하여 설정되는 MessageBus 환경을 결정할 때 중요한 Discourse 로직을 덮어쓰지 않으면서도 커스텀 값을 허용할 수 있다는 장점이 있습니다.

여기 계신 많은 개발자분들에게는 이 설정이 매우 자명해 보일 수 있지만, 조각들을 맞추는 것이 항상 쉽지는 않으므로 문서화할 가치가 있다고 생각했습니다. 이 글 덕분에 한 사람이 이 문제를 파악하는 데 1시간을 절약할 수 있다면 좋겠습니다!

위 내용 중 잘못된 점이나 부정확한 부분이 있다면 알려주시면 수정하겠습니다!