使用JavaScript向远程服务器发送数据时AJAX请求功能异常问题

问题核心原因 #

你看到控制台输出Successful仅代表AJAX请求本身成功拿到了目标地址的响应，不代表后续数据处理逻辑已执行。

你当前的实现逻辑存在本质错误：AJAX请求http://localhost:5000/index.html只会获取该页面的文本内容，不会执行页面内的JS代码，所以你写在index.html里的「从URL参数提取foo、发送socket事件」的逻辑全程没有运行，自然不会触发后续的写文件操作。iframe方案能生效是因为iframe会实际加载并运行目标页面的JS代码，和AJAX的逻辑完全不同。

排查与修复方案 #

• 第一步：调整服务端接收逻辑，放弃依赖前端页面JS处理参数
  正确的跨服务AJAX传数据应该直接请求目标服务的后端接口，而非前端静态页面。你可以给localhost:5000的服务新增一个专门接收数据的接口，直接在服务端接收AJAX传递的参数，不需要走socket.io中转。以下是Node.js Express框架的示例代码：

  const express = require('express');
  const fs = require('fs');
  const cors = require('cors');
  const app = express();
  
  // 配置跨域，避免AJAX请求报CORS错误
  app.use(cors());
  
  app.get('/save-data', (req, res) => {
    // 直接获取AJAX传递的foo参数
    const receiveData = req.query.foo;
    const fileName = './src/data.json';
    const file = require(fileName);
    file.data = receiveData;
    
    fs.writeFile(fileName, JSON.stringify(file), err => {
      if (err) return res.status(500).json({status: 'fail', msg: err});
      res.json({status: 'success', msg: 'data saved'});
    });
  });
  
  app.listen(5000, () => console.log('service running on port 5000'));
  

• 第二步：修改前端AJAX请求配置
  将请求地址改为新增的后端接口，同时添加错误回调方便排查问题：

  var AjaxURL = 'http://localhost:5000/save-data';
  $.ajax({
    type: "GET",
    url: AjaxURL,
    data: { 
      foo: "test01"
    },
    success: function(result) {
      window.console.log('请求成功', result);
    },
    error: function(err) {
      window.console.error('请求失败', err);
    }
  });
  

• 第三步：排查跨域配置
  如果请求进入error回调且控制台提示跨域错误，确认目标服务端的CORS规则已放开你当前前端页面的域名访问权限。
• 第四步：验证参数接收
  在服务端接口逻辑中添加日志打印req.query，确认foo参数已正常被服务端接收。
• 第五步：检查文件权限
  确认服务端运行进程对./src/data.json文件有读写权限，避免因权限不足导致写文件失败。

可选优化（无需AJAX） #

如果你的项目允许直接使用socket.io，完全可以跳过AJAX，前端直接连接localhost:5000的socket.io服务，直接emit data事件传递参数，实现更简单。

内容的提问来源于stack exchange，提问作者Club Asirio Huelva