Failed to connect to websocket on production

jhefreyzz · November 9, 2020, 12:30pm

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.

dlobo · November 10, 2020, 3:24am

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

jhefreyzz · November 10, 2020, 11:00am

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.

wanton7 · November 10, 2020, 11:07am

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.

jhefreyzz · November 10, 2020, 11:17am

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

wanton7 · November 10, 2020, 11:25am

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

jhefreyzz · November 10, 2020, 11:29am

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

dumadi · September 19, 2021, 8:56pm

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

mody5 · August 2, 2023, 2:39am

Are you sure check_origin is an option of socket?

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

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?