Error connecting to websocket in production for backend graphql api

Questions / Help
,
1

Greetings everyone.

I am building a web-app using phoenix absinthe for back end API and react Apollo for fronted. The back end is hosted on linode and the frontend is on cloudfare pages.

Everything works fine in production except connection to web sockets. I am having trouble getting web socket to work. Here is the browser console errors.

GETwss://backend.example.cm:8443/socket/websocket?token=QTEyOEdDTQ.U_2KdW3qyENeCLwfG85shfR0tLLT2oVWmVYVAn8gWSOrjxEIGxUAnB9ULm0.RkUyUPB0k4RoKYVp.DoHEL6XKRIT43KYU-wf325jl-Cvzm5kK_dOjfhJKWflBiqBfAtCeXOsCjooefAfbXs9IoKHzH5-Nr3NYd7LkziWC8cM.t8l8eTz4mxPPdziEVT5Dtw&vsn=2.0.0

[HTTP/1.1 403 Forbidden 1092ms]

Firefox can’t establish a connection to the server at wss://backend.example.cm:8443/socket/websocket?token=QTEyOEdDTQ.U_2KdW3qyENeCLwfG85shfR0tLLT2oVWmVYVAn8gWSOrjxEIGxUAnB9ULm0.RkUyUPB0k4RoKYVp.DoHEL6XKRIT43KYU-wf325jl-Cvzm5kK_dOjfhJKWflBiqBfAtCeXOsCjooefAfbXs9IoKHzH5-Nr3NYd7LkziWC8cM.t8l8eTz4mxPPdziEVT5Dtw&vsn=2.0.0. phoenix.mjs:1209

Error connecting using WebSocket apollo.js:37:14

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://backend.example.cm:8443/socket/longpoll?token=QTEyOEdDTQ.U_2KdW3qyENeCLwfG85shfR0tLLT2oVWmVYVAn8gWSOrjxEIGxUAnB9ULm0.RkUyUPB0k4RoKYVp.DoHEL6XKRIT43KYU-wf325jl-Cvzm5kK_dOjfhJKWflBiqBfAtCeXOsCjooefAfbXs9IoKHzH5-Nr3NYd7LkziWC8cM.t8l8eTz4mxPPdziEVT5Dtw&vsn=2.0.0&. (Reason: header ‘content-type’ is not allowed according to header ‘Access-Control-Allow-Headers’ from CORS preflight response).

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://backend.example.cm:8443/socket/longpoll?token=QTEyOEdDTQ.U_2KdW3qyENeCLwfG85shfR0tLLT2oVWmVYVAn8gWSOrjxEIGxUAnB9ULm0.RkUyUPB0k4RoKYVp.DoHEL6XKRIT43KYU-wf325jl-Cvzm5kK_dOjfhJKWflBiqBfAtCeXOsCjooefAfbXs9IoKHzH5-Nr3NYd7LkziWC8cM.t8l8eTz4mxPPdziEVT5Dtw&vsn=2.0.0&. (Reason: CORS request did not succeed). Status code: (null).

Error connecting using LongPoll apollo.js:37:14

Error connecting using WebSocket apollo.js:37:14

Error connecting using LongPoll

`

The config.exs for the backend api is

config :cors_plug,
  origin: ["http://localhost:3000", "https://example.com"],
  max_age: 86400,
  methods: ["GET", "POST"]
`
````Preformatted text`

prod.exs
`config :app, AppWeb.Endpoint,
  server: true,
  secret_key_base: secret_key_base,
  url: [host: "backend.example.com", port: 4000],
  https: [
    port: 8443,
    otp_app: :app,
    cipher_suite: :strong,
    keyfile: System.get_env("SSL_KEY_PATH") || "priv/cert/private.key",
    certfile: System.get_env("SSL_CERT_PATH") || "priv/cert/certificate.crt",
    cacertfile: System.get_env("SSL_CA_PATH") || "priv/cert/ca_bundle.crt"
  ],
  force_ssl: [rewrite_on: [:x_forwarded_proto], host: nil]
  `

endpoint.ex
  `
  origin =
    case Mix.env() do
      :prod -> ["https://example.com"]
      _ -> false
    end

  socket "/socket", AppWeb.AbsintheSocket,
    websocket: true,
    longpoll: true,
    check_origin: ["https://example.com", "https://backend.example.com", "https://backend.example.com:8443"]

  plug CORSPlug
  `

and apollo.js 
const HTTP_URI =
  process.env.NODE_ENV === "production"
    ? "https://backend.example.com:8443/api"
    : "http://localhost:4000/api";

const WS_URI =
  process.env.NODE_ENV === "production"
    ? "wss://backend.example.com:8443/socket"
    : "ws://localhost:4000/socket";

I don’t know what i am doing wrong. Everything works except the web sockets.

Appreciate if anyone can help?

Regards,
Venkat

2

I started the backend server using iex and i found this log.

Origin of the request: https://example.com

This happens when you are attempting a socket connection to
a different host than the one configured in your config/
files. For example, in development the host is configured
to "localhost" but you may be trying to access it from
"127.0.0.1". To fix this issue, you may either:

  1. update [url: [host: ...]] to your actual host in the
     config file for your current environment (recommended)

  2. pass the :check_origin option when configuring your
     endpoint or when configuring the transport in your
     UserSocket module, explicitly outlining which origins
     are allowed:

        check_origin: ["https://example.com",
                       "//another.com:888", "//other.com"]

the config.exs

config :cors_plug,
  origin: ["http://localhost:3000", "https://example.com", "//example.com",
  "https://backend.example.com",  "//backend.example.com", "https://backend.example.com:8443", "//backend.example.com:8443"],
  max_age: 86400,
  methods: ["GET", "POST"]

and endpoint.ex

origin =
    case Mix.env() do
      :prod -> ["https//example.com", "//example.com", "https://backend.example.com" , "//backend.example.com" , "https://backend.example.com:8443", "//backend.example.com:8443"]
      _ -> false
    end

  socket "/socket", AppWeb.AbsintheSocket,
    websocket: true,
    longpoll: true,
    check_origin: ["https://example.com", "//example.com", "https://backend.example.com", "//backend.example.com",
                  "https://backend.example.com:8443", "//backend.example.com:8443"]

  plug CORSPlug

Appreciate someone can find what I am doing wrong?

3

Hi!
this looks like typo error, the mother of all errors:

wss://backend.example.cm => wss://backend.example.com