使用AJAX提交数据时出现跨域错误，求API测试解决方案

嘿，我看到你在AJAX请求时碰到了跨域问题，而且你尝试在请求里加Access-Control-Allow-Origin头——其实这里有个关键误区哦！

先纠正你的核心错误 #

Access-Control-Allow-Origin是后端返回的响应头，不是前端请求头！你在前端的beforeSend里设置这个头完全没用，浏览器根本不会认可，跨域的权限是由后端来开放的。

正确的解决方法分两种情况： #

1. 你有权修改后端API（推荐方案）

你需要在后端的API响应中添加CORS相关的响应头，具体设置如下：

• 最基础的允许跨域：添加Access-Control-Allow-Origin: *（允许所有域名访问，生产环境建议改成你的前端域名，比如https://your-frontend.com）
• 如果你的请求是POST且发送JSON（像你代码里的Content-Type: application/json），还需要处理浏览器的预检请求（OPTIONS），同时添加以下头：
  • Access-Control-Allow-Methods: GET, POST, OPTIONS
  • Access-Control-Allow-Headers: Content-Type

举几个常见后端的示例：

• Node.js/Express：

  app.use((req, res, next) => {
    res.header('Access-Control-Allow-Origin', '*'); // 生产环境替换为具体域名
    res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
    res.header('Access-Control-Allow-Headers', 'Content-Type');
    if (req.method === 'OPTIONS') {
      return res.sendStatus(200); // 处理预检请求
    }
    next();
  });
  

• PHP：

  header("Access-Control-Allow-Origin: *");
  header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
  header("Access-Control-Allow-Headers: Content-Type");
  if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
    exit(0);
  }
  

2. 暂时无法修改后端（临时/开发环境方案）

• 本地开发用代理：比如用Webpack Dev Server的代理配置，把API请求转发到后端域名，这样浏览器会认为是同域请求。举个Webpack配置的例子：

  module.exports = {
    // ...其他配置
    devServer: {
      proxy: {
        '/api': {
          target: 'https://your-backend-api.com',
          changeOrigin: true
        }
      }
    }
  };
  

• JSONP（仅支持GET请求）：如果你的请求是GET，可以改用JSONP，但需要后端配合返回JSONP格式的响应。jQuery里可以这么写：

  $.getJSON('https://your-backend-api.com/api?callback=?', { name: 'test' }, function(data) {
    // 处理返回的数据
  });
  

再检查你的前端代码 #

你代码里的Content-Type没写完，应该是Content-Type: application/json，而且发送JSON数据时，需要用JSON.stringify()把对象转成字符串：

function sendData(){
  var sendInfo = { "name" : "test" };
  $.ajax({
    url: '你的API地址',
    type: 'POST',
    contentType: 'application/json',
    data: JSON.stringify(sendInfo),
    success: function(response) {
      console.log('请求成功', response);
    },
    error: function(xhr) {
      console.log('请求失败', xhr);
    }
  });
}

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