Search code examples
herokuelixirphoenix-live-view

Liveview app reloading infinitely on heroku deployment

This might be a stupid question to ask but are there any extra steps I need to complete to deploy a phoenix liveview app to heroku? From official documents deployment of phoenix app was successful but converting the same page into a liveview caused the page to reload infinitely And the error I get on heroku logs are:

2022-01-18T07:35:12.424013+00:00 heroku[router]: at=info method=GET path="/" host=fast-fortress-60216.herokuapp.com request_id=0bf752c3-185a-44d4-84ce-7004f7031984 fwd="27.34.20.173" dyno=web.1 connect=0ms service=2ms status=200 bytes=4941 protocol=https
2022-01-18T07:35:13.895958+00:00 heroku[router]: at=info method=GET path="/assets/app-097a5c6ca9e10ff4881312b83e54a14f.css?vsn=d" host=fast-fortress-60216.herokuapp.com request_id=8d4e402d-cf16-4e4d-8b26-3bdcbbc6186c fwd="27.34.20.173" dyno=web.1 connect=0ms service=2ms status=200 bytes=15612 protocol=https
2022-01-18T07:35:15.191409+00:00 heroku[router]: at=info method=GET path="/live/websocket?_csrf_token=SC9hAXBiKRoOLDYALRkhCT8EBzk8LT0syDSs70xHbMfQfZyowhVUrjDs&_track_static%5B0%5D=https%3A%2F%2Ffast-fortress-60216.herokuapp.com%2Fassets%2Fapp-097a5c6ca9e10ff4881312b83e54a14f.css%3Fvsn%3Dd&_track_static%5B1%5D=https%3A%2F%2Ffast-fortress-60216.herokuapp.com%2Fassets%2Fapp-a670ca05a10bcaada1c4842b40be19a2.js%3Fvsn%3Dd&_mounts=0&vsn=2.0.0" host=fast-fortress-60216.herokuapp.com request_id=e8ef08c8-d80a-4a79-8b73-d21cc5e47d2c fwd="27.34.20.173" dyno=web.1 connect=0ms service=1ms status=403 bytes=195 protocol=https
2022-01-18T07:35:15.191230+00:00 app[web.1]: 07:35:15.191 [error] Could not check origin for Phoenix.Socket transport.
2022-01-18T07:35:15.191243+00:00 app[web.1]: 
2022-01-18T07:35:15.191244+00:00 app[web.1]: Origin of the request: https://fast-fortress-60216.herokuapp.com
2022-01-18T07:35:15.191244+00:00 app[web.1]: 
2022-01-18T07:35:15.191245+00:00 app[web.1]: This happens when you are attempting a socket connection to
2022-01-18T07:35:15.191246+00:00 app[web.1]: a different host than the one configured in your config/
2022-01-18T07:35:15.191246+00:00 app[web.1]: files. For example, in development the host is configured
2022-01-18T07:35:15.191246+00:00 app[web.1]: to "localhost" but you may be trying to access it from
2022-01-18T07:35:15.191247+00:00 app[web.1]: "127.0.0.1". To fix this issue, you may either:
2022-01-18T07:35:15.191247+00:00 app[web.1]: 
2022-01-18T07:35:15.191248+00:00 app[web.1]: 1. update [url: [host: ...]] to your actual host in the
2022-01-18T07:35:15.191248+00:00 app[web.1]: config file for your current environment (recommended)
2022-01-18T07:35:15.191248+00:00 app[web.1]: 
2022-01-18T07:35:15.191248+00:00 app[web.1]: 2. pass the :check_origin option when configuring your
2022-01-18T07:35:15.191249+00:00 app[web.1]: endpoint or when configuring the transport in your
2022-01-18T07:35:15.191249+00:00 app[web.1]: UserSocket module, explicitly outlining which origins
2022-01-18T07:35:15.191250+00:00 app[web.1]: are allowed:
2022-01-18T07:35:15.191251+00:00 app[web.1]: 
2022-01-18T07:35:15.191251+00:00 app[web.1]: check_origin: ["https://example.com",
2022-01-18T07:35:15.191251+00:00 app[web.1]: "//another.com:888", "//other.com"]

Do I have to install extra buildpacks or some changes in my configs?

Solution

  • My bad The solution was right there but I didn't exactly know how to implement it. The solution is adding config :grasruts, GrasrutsWeb.Endpoint, check_origin: ["http://localhost:4000/","https://HEROKU_APP_URL/"]