phoenix.js：WebSocket連接到ws：// localhost：4000 /套接字失敗

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 

Various sources說這是對傳輸層，這使得位的意義，因爲這是在控制檯突出顯示錯誤所在：

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

的陣營應用發現端點就像這樣：

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 }); 
} 

NB：修訂該行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';