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.

1 Like

If you are using environment variables for request origin, make sure you drop the protocol, our config is:

REQUEST_ORIGIN_WILDCARD. |//*.tides.example.com

REQUEST_ORIGIN. //api.sol.tides.example.com

Unfortunately this doesn’t work.

I set already the VUE_APP_WEBSOCKET_URL = //open-peaceful-springtail.gigalixirapp.com/socket.

I really don’t know where does my socket connection fail.
I configure the necessary steps in order for websocket connection to work.

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

Based on the logs, the request origin is Origin of the request: https://pickr.vercel.app so I modify the config as below

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

Also tried to set check_origin to false

  socket "/socket", PickrWeb.UserSocket,
    websocket: true,
    longpoll: false,
    check_origin: false

but still received the same error

2020-11-10T10:59:10.544118+00:00 open-peaceful-springtail[open-peaceful-springtail-6dff9c4c89-5lqc4]: web.1  | 10:59:10.543 [error] Could not check origin for Phoenix.Socket transport.
2020-11-10T10:59:10.544175+00:00 open-peaceful-springtail[open-peaceful-springtail-6dff9c4c89-5lqc4]: web.1  | 
2020-11-10T10:59:10.544176+00:00 open-peaceful-springtail[open-peaceful-springtail-6dff9c4c89-5lqc4]: web.1  | Origin of the request: https://pickr.vercel.app
2020-11-10T10:59:10.544177+00:00 open-peaceful-springtail[open-peaceful-springtail-6dff9c4c89-5lqc4]: web.1  | 
2020-11-10T10:59:10.544265+00:00 open-peaceful-springtail[open-peaceful-springtail-6dff9c4c89-5lqc4]: web.1  | This happens when you are attempting a socket connection to
2020-11-10T10:59:10.544305+00:00 open-peaceful-springtail[open-peaceful-springtail-6dff9c4c89-5lqc4]: web.1  | a different host than the one configured in your config/
2020-11-10T10:59:10.544311+00:00 open-peaceful-springtail[open-peaceful-springtail-6dff9c4c89-5lqc4]: web.1  | files. For example, in development the host is configured
2020-11-10T10:59:10.544311+00:00 open-peaceful-springtail[open-peaceful-springtail-6dff9c4c89-5lqc4]: web.1  | to "localhost" but you may be trying to access it from
2020-11-10T10:59:10.544313+00:00 open-peaceful-springtail[open-peaceful-springtail-6dff9c4c89-5lqc4]: web.1  | "127.0.0.1". To fix this issue, you may either:
2020-11-10T10:59:10.544344+00:00 open-peaceful-springtail[open-peaceful-springtail-6dff9c4c89-5lqc4]: web.1  | 
2020-11-10T10:59:10.544425+00:00 open-peaceful-springtail[open-peaceful-springtail-6dff9c4c89-5lqc4]: web.1  |   1. update [url: [host: ...]] to your actual host in the
2020-11-10T10:59:10.544429+00:00 open-peaceful-springtail[open-peaceful-springtail-6dff9c4c89-5lqc4]: web.1  |      config file for your current environment (recommended)
2020-11-10T10:59:10.544432+00:00 open-peaceful-springtail[open-peaceful-springtail-6dff9c4c89-5lqc4]: web.1  | 
2020-11-10T10:59:10.544465+00:00 open-peaceful-springtail[open-peaceful-springtail-6dff9c4c89-5lqc4]: web.1  |   2. pass the :check_origin option when configuring your
2020-11-10T10:59:10.544797+00:00 open-peaceful-springtail[open-peaceful-springtail-6dff9c4c89-5lqc4]: web.1  |      endpoint or when configuring the transport in your
2020-11-10T10:59:10.544813+00:00 open-peaceful-springtail[open-peaceful-springtail-6dff9c4c89-5lqc4]: web.1  |      UserSocket module, explicitly outlining which origins
2020-11-10T10:59:10.544824+00:00 open-peaceful-springtail[open-peaceful-springtail-6dff9c4c89-5lqc4]: web.1  |      are allowed:
2020-11-10T10:59:10.544824+00:00 open-peaceful-springtail[open-peaceful-springtail-6dff9c4c89-5lqc4]: web.1  | 
2020-11-10T10:59:10.544825+00:00 open-peaceful-springtail[open-peaceful-springtail-6dff9c4c89-5lqc4]: web.1  |         check_origin: ["https://example.com",
2020-11-10T10:59:10.544826+00:00 open-peaceful-springtail[open-peaceful-springtail-6dff9c4c89-5lqc4]: web.1  |                        "//another.com:888", "//other.com"]
2020-11-10T10:59:10.544833+00:00 open-peaceful-springtail[open-peaceful-springtail-6dff9c4c89-5lqc4]: web.1  | 
2020-11-10T10:59:10.544833+00:00 open-peaceful-springtail[open-peaceful-springtail-6dff9c4c89-5lqc4]: web.1  | 

I really don’t know anymore. I’m stuck with this error.

I just code with Elixir as hobby so I might be wrong but are actually connecting to https://pickr.vercel.app/socket ? Because that is the route that check_origin there is actually effecting by my understanding.

Actually the wss link is correct judging by the browser log

WebSocket connection to 'wss://open-peaceful-springtail.gigalixirapp.com/socket/websocket?vsn=2.0.0' failed: Error during WebSocket handshake: Unexpected response code: 403

Url looks good but are you sure check_origin: is in correct place? My understanding is that it should be in endpoint?

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"]

I am having this exact problem and have tried all the options here and does seem to be working. Is there anything i might be missing