jhefreyzz

Failed to connect to websocket on production

I was able to deploy my first simple app to gigalixir and I it went all good until the socket connection was called in my frontend.

I have configured the UserSocket to add my frontend domain to check_origin option.

  socket "/socket", PickrWeb.UserSocket,
    websocket: true,
    longpoll: false,
    check_origin: ["https://pickr.vercel.app"]

I also updated the Endpoint url in prod.exs

config :pickr, PickrWeb.Endpoint,
  url: [host: "https://open-peaceful-springtail.gigalixirapp.com", port: 80]

I think I did the necessary steps to be able to connect but my frontend connection keeps logging 403 error

Here’s my gigalixir log

2020-11-09T12:22:07.506878+00:00 open-peaceful-springtail[open-peaceful-springtail-6d57796d8b-hxjln]: web.1  | 12:22:07.506 [error] Could not check origin for Phoenix.Socket transport.
2020-11-09T12:22:07.507036+00:00 open-peaceful-springtail[open-peaceful-springtail-6d57796d8b-hxjln]: web.1  | 
2020-11-09T12:22:07.507083+00:00 open-peaceful-springtail[open-peaceful-springtail-6d57796d8b-hxjln]: web.1  | Origin of the request: https://pickr.vercel.app
2020-11-09T12:22:07.507129+00:00 open-peaceful-springtail[open-peaceful-springtail-6d57796d8b-hxjln]: web.1  | 
2020-11-09T12:22:07.507173+00:00 open-peaceful-springtail[open-peaceful-springtail-6d57796d8b-hxjln]: web.1  | This happens when you are attempting a socket connection to
2020-11-09T12:22:07.507236+00:00 open-peaceful-springtail[open-peaceful-springtail-6d57796d8b-hxjln]: web.1  | a different host than the one configured in your config/
2020-11-09T12:22:07.507260+00:00 open-peaceful-springtail[open-peaceful-springtail-6d57796d8b-hxjln]: web.1  | files. For example, in development the host is configured
2020-11-09T12:22:07.507386+00:00 open-peaceful-springtail[open-peaceful-springtail-6d57796d8b-hxjln]: web.1  | to "localhost" but you may be trying to access it from
2020-11-09T12:22:07.507427+00:00 open-peaceful-springtail[open-peaceful-springtail-6d57796d8b-hxjln]: web.1  | "127.0.0.1". To fix this issue, you may either:
2020-11-09T12:22:07.507475+00:00 open-peaceful-springtail[open-peaceful-springtail-6d57796d8b-hxjln]: web.1  | 
2020-11-09T12:22:07.507511+00:00 open-peaceful-springtail[open-peaceful-springtail-6d57796d8b-hxjln]: web.1  |   1. update [url: [host: ...]] to your actual host in the
2020-11-09T12:22:07.507554+00:00 open-peaceful-springtail[open-peaceful-springtail-6d57796d8b-hxjln]: web.1  |      config file for your current environment (recommended)
2020-11-09T12:22:07.507602+00:00 open-peaceful-springtail[open-peaceful-springtail-6d57796d8b-hxjln]: web.1  | 
2020-11-09T12:22:07.507653+00:00 open-peaceful-springtail[open-peaceful-springtail-6d57796d8b-hxjln]: web.1  |   2. pass the :check_origin option when configuring your
2020-11-09T12:22:07.507822+00:00 open-peaceful-springtail[open-peaceful-springtail-6d57796d8b-hxjln]: web.1  |      endpoint or when configuring the transport in your
2020-11-09T12:22:07.507855+00:00 open-peaceful-springtail[open-peaceful-springtail-6d57796d8b-hxjln]: web.1  |      UserSocket module, explicitly outlining which origins
2020-11-09T12:22:07.507900+00:00 open-peaceful-springtail[open-peaceful-springtail-6d57796d8b-hxjln]: web.1  |      are allowed:
2020-11-09T12:22:07.507971+00:00 open-peaceful-springtail[open-peaceful-springtail-6d57796d8b-hxjln]: web.1  | 
2020-11-09T12:22:07.508019+00:00 open-peaceful-springtail[open-peaceful-springtail-6d57796d8b-hxjln]: web.1  |         check_origin: ["https://example.com",
2020-11-09T12:22:07.508063+00:00 open-peaceful-springtail[open-peaceful-springtail-6d57796d8b-hxjln]: web.1  |                        "//another.com:888", "//other.com"]
2020-11-09T12:22:07.508105+00:00 open-peaceful-springtail[open-peaceful-springtail-6d57796d8b-hxjln]: web.1  | 
2020-11-09T12:22:07.508220+00:00 open-peaceful-springtail[open-peaceful-springtail-6d57796d8b-hxjln]: web.1  |

I’m really excited for this one, hopefully someone can help me.
Thank you very much.

8 comments

/phoenix #deployment

1 3686 8

2023-08-02 02:39:12 UTC

Marked As Solved

jhefreyzz

Thank you for the replies, I already solved the issue thru slack channel.

I configure the config as below.

config :pickr, PickrWeb.Endpoint,
  url: [host: "pickr.vercel.app", port: 443, scheme: "https"]

Post #7

Also Liked

mody5

Are you sure check_origin is an option of socket?

from what I see in the doc: Phoenix.Endpoint — Phoenix v1.8.8

check_origin should be set for websocket or longpoll, something like this maybe:

socket "/socket", PickrWeb.UserSocket,
    websocket: [ check_origin: ["https://pickr.vercel.app"] ],
    longpoll: [ check_origin: ["https://pickr.vercel.app"] ]

At least this is what the doc seems to say! but I would like to know if there is another way, because… what will happen to these “true” and “false” that were set for websocket and longpoll?

Post #9