我创建了一个WebSocket连接,用于服务webrtc请求/应答(客户端):
export function webSocketConnect(room_code, action, username){
let scheme = "ws";
/* If the protocol is https you must use web socket secured */
if(document.location.protocol === "https:"){
scheme += "s";
}
getServerURL = createGetterForParam(hostname + ":" + server_port);
let websocketScheme = scheme + "://" + getServerURL.get();
log("Server URL is: " + websocketScheme);
try{
web_socket_connection = new WebSocket(websocketScheme, "json");
}catch(err){
throw new Error("couldn't connect you to the server");
}
//assign event handlers
...
}
这连接到一个节点js服务器(服务器):
try{
http_s_server = https.createServer(
https_options,
handleHttpsRequest
);
log("Created a https server");
}catch(err){...}
http_s_server.listen(port, function(){
log("Https server is listening on port: " + port);
});
web_socket_server = new WebSocketServer({
httpServer: http_s_server,
autoAcceptConnections: false,
});
web_socket_server.on('request',async function(request) {
log("request received");
let connection = request.accept("json", request.origin);
assignConnectionHandlers(connection);
...
}
我想上传一个文件到服务器,我正在使用post请求(从<input type="file"...>
,客户端获取文件):
let new_filename = getUsername.get() + "_" + getClientID.get() + "_" + getRoomCode.get() + "_" + file.name;
let formdata = new FormData();
formdata.append("file", file, new_filename);
fetch(window.location.protocol + "//" + getServerURL.get() + "/Files", {
method: "POST",
body: formdata
})
.then(response => {
// handle the response here
log(JSON.stringify(response));
})
.then(data => {
// handle the data here
})
.catch(err => {
log(err);
});
在使用formidable
框架的服务器中:
function handleHttpsRequest(request, response){
let processed_url = request.url.split("?")[0];
let params = request.url.split("?")[1];
if (request.method === 'POST' && processed_url === '/Files') {
handleSendFile(request, response);
}
}
function handleSendFile(request, response){
var form = formidable.IncomingForm();
form.on('fileBegin', function(name, file){
file.path = localFilePath + file.name;
});
form.on('file', function(name,file){
log('Uploaded file: ' + file.name);
});
form.parse(request);
response.writeHead(200, {'Content-Type': 'text/plain'});
response.end();
}
我获取文件的html:
<div class="chat-input-icon">
<label for="file-input">
<img id="file-input-image" src="../images/open-explorer.png" alt="File icon">
</label>
</div>
<input type="file" id="file-input" name="file_input" style="display:none;">
文件成功保存到服务器中所需的目录,但WebSocket连接总是崩溃,我得到一个:
Error: read ECONNRESET
我也尝试过使用多个版本的强大,似乎没有什么工作。
我也尝试过基于一个更标准的表单来执行此操作,然后使用onsubmit
-〉event.preventDefault()
进行处理:
<form action="https://localhost:62000/Files" id="upload-file-form" enctype="multipart/form-data" method="post">
<div>Text field title: <input type="text" name="title" /></div>
<div>File: <input type="file" name="multipleFiles" /></div>
<input type="submit" value="Upload" />
</form>
有人知道修复方法吗?(接受任何更好的实现)
1条答案
按热度按时间qnzebej01#
我为每个分享这个问题的人解决了这个问题。我遇到了一个CORS问题,我设置了头来接受CORS请求。在我正确地提供了我的内容之后,这意味着我是从加载资源的同一个域请求的,这个问题被修复了。
更详细:
1.使用Web服务器加载内容,例如:https://127.0.0.1:62000
1.继续请求文档地址栏中显示的同一地址
1.现在应该没问题了
关于CORS的更详细回答:Why does my JavaScript code receive a "No 'Access-Control-Allow-Origin' header is present on the requested resource" error, while Postman does not?
MDN文件:https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS