Node js服务器safari客户端连接失败

node js server safari client connection fails

本文关键字：连接 失败 客户端 safari js 服务器 Node      更新时间：2023-09-26

我有一个简单的html-js<-ajax->nodejs服务器循环作为我的应用程序的测试基地核心。

它适用于windows 8浏览器:IE11, Chrome45,firefox40,opera31..在safari 5.1.7上失败

下面是客户端代码

<html>
<head>
<meta charset="UTF-8"> 
<script language="javascript">
var url="http://127.0.0.1:1001";
function sendData(rawData) {
    var strout="";
    var data=encodeURIComponent(rawData);
    var xhr = new XMLHttpRequest();
    xhr.open('POST', url, true);
    xhr.onreadystatechange=function(){
          if (xhr.readyState==4 && xhr.status==200){
            strout=decodeURIComponent(xhr.responseText);
            document.getElementById("opResult").innerHTML="srv-sent "+strout
            }
        }
    xhr.send(data);
    alert("sent = "+rawData)
}
//+++++++++++++++++++
function send(){
var v=document.getElementById("ta").value;
sendData(v);
}
</script>
</head>
<body>
<input type="button" value="send" onclick="send()">
<br>
<textarea id="ta" cols=40 rows=10> </textarea>
<br>
<div id="opResult"></div>
</body>
</html>

服务器端代码:

var http = require('http');
http.createServer(function(request, response){
    var postData="",cmdQ=[],resout=[];
    if (request.method == 'POST') {
      request.on('data', function (data) {
         postData += data;
      });
    }
    console.log("SRV got data:"+postData);
    request.on('end', function () {
    console.log("got post: "+decodeURIComponent(postData));
    resout="SRVRep: got "+decodeURIComponent(postData);
    response.writeHead(200, {
             'Content-Type': 'text/html',
             'Access-Control-Allow-Origin' : '*',
     'Access-Control-Allow-Headers':'Origin, X-Requested-With, Content-Type, Accept'
             }); 
        response.end(encodeURIComponent(resout), "utf-8");  
        console.log("sent "+resout);
        post_data="";
    });
}).listen(1001,'127.0.0.1');
console.log("server initialized to port 1001");

为了使web模拟完成，我运行(npm安装)http-server(端口8080)，客户端是index.html中的链接。

仿真简单;在客户端上，在文本框中输入一些内容，单击发送，您应该会得到

响应显示在opResultdiv中，它确实在所有地方，除了safari。

调试代码显示safari发送空白消息…歌珥问题吗? ! ?

Safari专家建议

(摘要在底部)

问题

我需要一个静态文件服务器(http-server:8080)来提供应用程序，和一个应用文件/数据存储服务器:1001.

这是你当前的模型:客户端访问静态数据和应用/数据作为两个不同的来源(维基):

(current model: client receives content from two origins)
http-server:8080 ─┐            ┌─> node:1001
                  └─> client <─┘

选项#1:反向代理

一个更流行的设计是"反向代理"(nginx, apache)，其中http-server提供静态数据和作为节点应用程序的接口。这样，你的两种内容类型来自相同的来源和端口，但仍然看到性能提升:

(reverse-proxy model: everything comes from localhost:8080)
node:1001 <─────> apache or nginx:8080 <──┐
                                          └─> client

…但你不是使用nginx或apache。不用担心。有一个NPM包可以用你在这里已经使用的堆栈来做这件事。

这个模型还有一个额外的优点，它为你的节点应用程序提供了http服务器的所有可配置性，为你提供了高级安全性和优化选项，如请求缓存。

…localhost!=127.0.0.1，无法处理到不同端口的IO…

这是官方的CORS违规，但并不总是这样。请查看MDN的同源策略文档。这个最近的策略必须减轻跨站点脚本攻击的问题。

选项#2:跨域共享标准(w3)

也就是说，是一种官方认可的跨源发出ajax请求的方式，但是"其他"域必须知道并接受您的流量。有两种方法可以实现:
  • 可以通过在节点应用程序的响应中添加Access-Control-Allow-Origin: *标头来允许简单的GET和POST请求。
  • 内容类型非application/x-www-form-urlencoded、multipart/form-data、text/plain的POST请求需要预飞行请求。

简介:

您可以通过以下两种方式避免违反浏览器的同源策略:

  1. 通过实现一个反向代理，所以你的静态和动态内容都来自同一个地方(在你的例子中，localhost:8080)
  2. 通过在节点中添加Access-Control-Allow-Origin: *头到您的响应，或在极少数情况下，预飞行请求。
相关文章：