phoenix.js：与ws：// localhost：4000 / socket的WebSocket连接失败

Question

我在Phoenix / React应用程序的Chrome控制台中收到此错误，但奇怪的是，它不在隐身模式下。 一切都指向相同的/socket端点。

WebSocket connection to 'ws://localhost:4000/socket/websocket?token=blah&vsn=1.0.0' failed: Error during WebSocket handshake: Unexpected response code: 400 

各种消息来源都说这与传输层有关，这很有道理，因为这是控制台中突出显示的错误所在：

this.conn = new this.transport(this.endPointURL());

React应用程序如下找到端点：

const API_URL = 'http://localhost:4000/api';
const WEBSOCKET_URL = API_URL.replace(/(https|http)/, 'ws').replace('/api', '');

function connectToSocket(dispatch) {
  const token = JSON.parse(localStorage.getItem('token'));
  const socket = new Socket(`${WEBSOCKET_URL}/socket`, {
    params: { token },
  });
  socket.connect();
  dispatch({ type: 'SOCKET_CONNECTED', socket });
}

注意： const socket = new Socket('${WEBSOCKET_URL}/socket/websocket'行修改为const socket = new Socket('${WEBSOCKET_URL}/socket/websocket'只会使错误显示为.../socket/websocket/websocket?...

endpoint.ex非常标准：

socket "/socket", App.UserSocket

但是，这些都没有指出为什么应用程序会隐身运行并以其他方式加载所有这些错误。

Answer 1

我将发布如何解决此问题的方法，因为它可能会对其他人有所帮助，尽管我不确定为什么会这样。 只需将前端和后端的localhost更改为IP地址：

在config.ex ：

config :app, App.Endpoint,
  url: [host: "127.0.0.1"]...

在您的前端：

const API_URL = 'http://127.0.0.1:4000/api';