Web应用向客户端localhost发送POST JSON数据的问题求助

老哥，你踩的坑其实很常见：当你的Web应用跑在XAMPP服务器上时，代码里写的localhost会被浏览器解析成XAMPP所在服务器的本地地址，而不是打开浏览器的客户端机器。毕竟AJAX请求是从浏览器发出去的，但目标地址是相对服务器来解析的，所以自然找不到客户端本地的桌面服务。

1. 先明确客户端服务的端口 #

首先得确认你的桌面应用在客户端机器上监听的是哪个端口，比如假设是8080，那客户端本地服务的地址就是http://localhost:8080（注意AJAX只能发HTTP/HTTPS请求，所以桌面服务得支持HTTP协议）。

2. 调整AJAX请求的正确姿势 #

直接把请求地址改成客户端的localhost:端口，但要注意两个关键细节：

• 必须设置contentType: 'application/json'，告诉服务端你发的是JSON数据；
• 要把JSON对象转成字符串发送，用JSON.stringify()处理。

修改后的代码示例：

$.ajax({
    type: 'post',
    url: 'http://localhost:8080', // 替换成你的桌面服务监听的实际端口
    dataType: 'json',
    contentType: 'application/json', // 这个必须加，不然服务端可能解析不了JSON
    data: JSON.stringify({ 
        labelContent: '快递标签内容',
        printCount: 1
    }), // 把你要发的JSON对象转成字符串
    success: function(response) {
        console.log('数据发送成功，桌面应用返回:', response);
        // 这里可以处理桌面应用的响应，比如提示用户打印成功
    },
    error: function(xhr, status, error) {
        console.error('发送失败:', error);
        // 先检查这几点：桌面服务有没有启动？端口是不是写错了？跨域配置有没有弄？
    }
});

3. 解决跨域拦路虎 #

因为你的Web应用在http://localhost:80（XAMPP默认端口），而请求目标是http://localhost:8080，这属于跨域请求，浏览器会直接拦截。所以必须在你的桌面服务里配置CORS：

• 在桌面服务的响应头里添加Access-Control-Allow-Origin: http://localhost:80（允许来自XAMPP的请求）；
• 测试环境可以临时用Access-Control-Allow-Origin: *（允许所有来源，但生产环境别这么干）；
• 还要确保响应头包含Access-Control-Allow-Methods: POST，允许POST请求。

4. 备选方案（如果HTTP不好搞） #

如果你的桌面服务不支持HTTP或者CORS配置太麻烦，可以试试用WebSocket实现双向通信，浏览器和桌面服务直接建立长连接，数据传输更顺畅，也不用纠结跨域的问题（不过需要桌面服务也支持WebSocket协议）。

内容的提问来源于stack exchange，提问作者Stathis Stathopoulos