Embed comments via Javascript - Failed to load resource

Hi guys,

When I tried to embed discourse comments via Javascript, I see these errors from my browser console

1st error from line 1 of comments file

Failed to load resource: the server responded with a status of 400 ()

2nd error from embed-application-08a52625979d3d44aac8a2dedf5a1a662fec81ffe8a9ebc2e6eefb15b2980874.js file

Uncaught DOMException: Failed to execute 'postMessage' on 'Window': Invalid target origin '' in a call to 'postMessage'.
    at u (https://forum.MYDOMAINNAME.com/assets/embed-application-08a52625979d3d44aac8a2dedf5a1a662fec81ffe8a9ebc2e6eefb15b2980874.js:1:105)
    at window.onload (https://forum.MYDOMAINNAME.com/assets/embed-application-08a52625979d3d44aac8a2dedf5a1a662fec81ffe8a9ebc2e6eefb15b2980874.js:1:523)

From these 2 errors. I believe the problem is because the browser is unable to find the assets from the server.

This might be due to my setup:

  • For my main application, it’s hosted by AWS EC2. All the static / assets files are stored inside AWS S3 folder, and fetched by my app via AWS cloudfront
  • For discourse, I installed it in a different EC2 instance using docker image.
  • Using AWS Route 53, I added an A file that redirects forum.MYDOMAINNAME.com to the discourse EC2 instance’s IP address

I embed the HTML & JS script inside my main app. When the code calls for the assets, since my main app (in a different EC2 instance) doesn’t contains the discourse’s asset files, error occurred.

If my assumption is correct. How should I fixed this? How can I store discourse’s assets inside S3, served by Cloudfront?

If my assumption is wrong. What do these errors mean and how can I fix them?