自定义域的WebSocket握手错误

Question

我把我的服务器上获取此错误：[error] Could not check origin for Phoenix.Socket transport.

我在Heroku上运行的凤凰城和JS应用只是在myapp.herokuapp.com细使用渠道。

我跟着heroku custom domain指令并不能改变我的prod.exs配置后立即加载我的应用程序的JavaScript：从url: [scheme: "https", host: "myapp.com", port: 443] ： url: [scheme: "https", host: "myapp.herokuapp.com", port: 443]

我得到使用自定义域名访问应用程序时，这个JS错误myapp.com：

WebSocket connection to 'wss://myapp.com/socket/websocket?token=undefined&vsn=1.0.0' failed: Error during WebSocket handshake: Unexpected response code: 400 

伴随Heroku的日志：

2016-11-27T03:27:52.259269+00:00 heroku[router]: at=info method=GET path="/socket/websocket?token=undefined&vsn=1.0.0" host=myapp.com request_id=94bd304b-e8f5-44aa-aff0-9336425e40b3 fwd="2601:602:9301:2b00:3c91:6660:9593:ad2c,2601:0602:9301:2b00:3c91:6660:9593:ad2c,108.162.245.66" dyno=web.1 connect=1ms service=1ms status=400 bytes=119 
2016-11-27T03:28:03.671267+00:00 heroku[router]: at=info method=GET path="/socket/websocket?token=undefined&vsn=1.0.0" host=myapp.herokuapp.com request_id=71483e0c-8f2a-4485-8506-5931513de1fb fwd="50.159.116.207" dyno=web.1 connect=0ms service=1ms status=403 bytes=195 
2016-11-27T03:28:03.650158+00:00 app[web.1]: 03:28:03.649 [error] Could not check origin for Phoenix.Socket transport. 
2016-11-27T03:28:03.650173+00:00 app[web.1]: 
2016-11-27T03:28:03.650174+00:00 app[web.1]: This happens when you are attempting a socket connection to 
2016-11-27T03:28:03.650175+00:00 app[web.1]: a different host than the one configured in your config/ 
2016-11-27T03:28:03.650175+00:00 app[web.1]: files. For example, in development the host is configured 
2016-11-27T03:28:03.650176+00:00 app[web.1]: to "localhost" but you may be trying to access it from 
2016-11-27T03:28:03.650177+00:00 app[web.1]: "127.0.0.1". To fix this issue, you may either: 
2016-11-27T03:28:03.650178+00:00 app[web.1]: 
2016-11-27T03:28:03.650178+00:00 app[web.1]: 1. update [url: [host: ...]] to your actual host in the 
2016-11-27T03:28:03.650179+00:00 app[web.1]:  config file for your current environment (recommended) 
2016-11-27T03:28:03.650179+00:00 app[web.1]: 
2016-11-27T03:28:03.650180+00:00 app[web.1]: 2. pass the :check_origin option when configuring your 
2016-11-27T03:28:03.650180+00:00 app[web.1]:  endpoint or when configuring the transport in your 
2016-11-27T03:28:03.650181+00:00 app[web.1]:  UserSocket module, explicitly outlining which origins 
2016-11-27T03:28:03.650182+00:00 app[web.1]:  are allowed: 
2016-11-27T03:28:03.650182+00:00 app[web.1]: 
2016-11-27T03:28:03.650183+00:00 app[web.1]:   check_origin: ["https://example.com", 
2016-11-27T03:28:03.650184+00:00 app[web.1]:      "//another.com:888", "//other.com"] 

当我访问myapp.herokuapp.com的JS错误略有不同：

WebSocket connection to 'wss://myapp.herokuapp.com/socket/websocket?token=undefined&vsn=1.0.0' failed: Error during WebSocket handshake: Unexpected response code: 403 

伴随Heroku的日志：

2016-11-27T03:31:31.615163+00:00 heroku[router]: at=info method=GET path="/socket/websocket?token=undefined&vsn=1.0.0" host=myapp.herokuapp.com request_id=d43b57da-6aef-426b-ba69-7706c95ccc6d fwd="50.159.116.207" dyno=web.1 connect=0ms service=1ms status=403 bytes=195 
2016-11-27T03:31:31.580305+00:00 app[web.1]: 03:31:31.579 [error] Could not check origin for Phoenix.Socket transport. 
2016-11-27T03:31:31.580319+00:00 app[web.1]: 
2016-11-27T03:31:31.580320+00:00 app[web.1]: This happens when you are attempting a socket connection to 
2016-11-27T03:31:31.580321+00:00 app[web.1]: a different host than the one configured in your config/ 
2016-11-27T03:31:31.580322+00:00 app[web.1]: files. For example, in development the host is configured 
2016-11-27T03:31:31.580322+00:00 app[web.1]: to "localhost" but you may be trying to access it from 
2016-11-27T03:31:31.580323+00:00 app[web.1]: "127.0.0.1". To fix this issue, you may either: 
2016-11-27T03:31:31.580324+00:00 app[web.1]: 
2016-11-27T03:31:31.580325+00:00 app[web.1]: 1. update [url: [host: ...]] to your actual host in the 
2016-11-27T03:31:31.580325+00:00 app[web.1]:  config file for your current environment (recommended) 
2016-11-27T03:31:31.580326+00:00 app[web.1]: 
2016-11-27T03:31:31.580326+00:00 app[web.1]: 2. pass the :check_origin option when configuring your 
2016-11-27T03:31:31.580327+00:00 app[web.1]:  endpoint or when configuring the transport in your 
2016-11-27T03:31:31.580327+00:00 app[web.1]:  UserSocket module, explicitly outlining which origins 
2016-11-27T03:31:31.580328+00:00 app[web.1]:  are allowed: 
2016-11-27T03:31:31.580329+00:00 app[web.1]: 
2016-11-27T03:31:31.580329+00:00 app[web.1]:   check_origin: ["https://example.com", 
2016-11-27T03:31:31.580330+00:00 app[web.1]:      "//another.com:888", "//other.com"] 

---

当我把我的配置为url: [scheme: "https", host: "myapp.herokuapp.com", port: 443]我没有得到任何错误，当访问myapp.herokuapp.com，但是当我访问myapp.com时，我在JS控制台中收到以下错误：

WebSocket connection to 'wss://myapp.com/socket/websocket?token=undefined&vsn=1.0.0' failed: Error during WebSocket handshake: Unexpected response code: 403 

伴随Heroku的日志：

2016-11-27T03:34:55.671996+00:00 heroku[router]: at=info method=GET path="/socket/websocket?token=undefined&vsn=1.0.0" host=myapp.com request_id=ab595797-26ab-4952-ac77-2ab31bf18384 fwd="50.159.116.207,50.159.116.207,108.162.245.248" dyno=web.1 connect=0ms service=1ms status=403 bytes=214 
2016-11-27T03:34:55.661334+00:00 app[web.1]: This happens when you are attempting a socket connection to 
2016-11-27T03:34:55.661335+00:00 app[web.1]: a different host than the one configured in your config/ 
2016-11-27T03:34:55.661321+00:00 app[web.1]: 03:34:55.661 [error] Could not check origin for Phoenix.Socket transport. 
2016-11-27T03:34:55.661333+00:00 app[web.1]: 
2016-11-27T03:34:55.661347+00:00 app[web.1]: files. For example, in development the host is configured 
2016-11-27T03:34:55.661348+00:00 app[web.1]: to "localhost" but you may be trying to access it from 
2016-11-27T03:34:55.661349+00:00 app[web.1]: "127.0.0.1". To fix this issue, you may either: 
2016-11-27T03:34:55.661350+00:00 app[web.1]: 1. update [url: [host: ...]] to your actual host in the 
2016-11-27T03:34:55.661352+00:00 app[web.1]:  endpoint or when configuring the transport in your 
2016-11-27T03:34:55.661351+00:00 app[web.1]:  config file for your current environment (recommended) 
2016-11-27T03:34:55.661349+00:00 app[web.1]: 
2016-11-27T03:34:55.661351+00:00 app[web.1]: 
2016-11-27T03:34:55.661352+00:00 app[web.1]: 2. pass the :check_origin option when configuring your 
2016-11-27T03:34:55.661354+00:00 app[web.1]:  are allowed: 
2016-11-27T03:34:55.661355+00:00 app[web.1]: 
2016-11-27T03:34:55.661353+00:00 app[web.1]:  UserSocket module, explicitly outlining which origins 
2016-11-27T03:34:55.661355+00:00 app[web.1]:   check_origin: ["https://example.com", 
2016-11-27T03:34:55.661356+00:00 app[web.1]:      "//another.com:888", "//other.com"] 

---

我试着设置check_origin为假，但它不工作要么。访问myapp.com时，heroku日志不再显示错误。

heroku[router]: at=info method=GET path="/socket/websocket?token=undefined&vsn=1.0.0" host=myapp.com request_id=379b61c9-94be-4a1c-ac43-419e9554ac51 fwd="2601:602:9301:2b00:3c91:6660:9593:ad2c,2601:0602:9301:2b00:3c91:6660:9593:ad2c,108.162.245.122" dyno=web.1 connect=1ms service=1ms status=400 bytes=119 

但我仍然在JS控制台得到这样的：什么是值得我：

WebSocket connection to 'wss://myapp.com/socket/websocket?token=undefined&vsn=1.0.0' failed: Error during WebSocket handshake: Unexpected response code: 400 

我为我的应用程序的端点

config :my_app, MyApp.Endpoint, 
    http: [port: {:system, "PORT"}], 
    url: [scheme: "https", host: "myapp.com", port: 443], 
    check_origin: false, 
    force_ssl: [rewrite_on: [:x_forwarded_proto]], 
    cache_static_manifest: "priv/static/manifest.json", 
    secret_key_base: System.get_env("SECRET_KEY_BASE") 

编辑全配置m为我的dns使用cloudflare并将ssl选项设置为full。

---

编辑2：如果我继续在check_origin: false我的配置，我可以加载myapp.com，我改变我的插座。js文件来自：

let socket = new Socket("/socket", {params: {token: window.userToken}}) 

到：

let socket = new Socket("wss://myapp.herokuapp.com/socket", {params: {token: window.userToken}}) 

因为我不想让check_origin假我想它更新到这一点：

url: [scheme: "https", host: "myapp.com", port: 443], 
    check_origin: ["myapp.com", "myapp.herokuapp.com", "//myapp.com", "//myapp.herokuapp.com"], 

这些重新编译应用程序后新的设置，当我尝试访问myapp.com时，它使我在控制台中出现此JS错误：

WebSocket connection to 'wss://myapp.herokuapp.com/socket/websocket?token=undefined&vsn=1.0.0' failed: Error during WebSocket handshake: Unexpected response code: 503 

Answer 1

第一个问题在于使用heroku和cloudflare。这篇文章说，它不能与自定义网址完成，你只能用它与默认heroku网址 https://support.cloudflare.com/hc/en-us/articles/205893698-Configure-Cloudflare-and-Heroku-over-HTTPS

说，没有使用cloudflare我也遇到了问题。对我来说有效的是 - 将check_origin参数设置为您正在访问的url的完整路径。 我，我也使用www，所以我的配置看起来像这样

url: [scheme: "https", host: "myapp.com", port: 443], 
check_origin: [ 
    "https://myapp.com", 
    "https://www.myapp.com" 
], 

（我的配置的其余部分也和你一样）