js 跨域请求

// 使用 XMLHttpRequest 进行跨域请求 (CORS)
function makeCorsRequest() {
  // 创建一个新的 XMLHttpRequest 对象
  var xhr = new XMLHttpRequest();

  // 设置请求的 URL，这里假设目标服务器支持 CORS
  var url = 'https://example.com/api/data';

  // 配置请求类型为 GET，并指定回调函数
  xhr.open('GET', url, true);

  // 设置请求头（如果需要）
  xhr.setRequestHeader('Content-Type', 'application/json');

  // 当请求状态改变时触发的事件处理程序
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) { // 请求完成
      if (xhr.status === 200) { // 请求成功
        console.log('Response:', xhr.responseText);
      } else {
        console.error('Error:', xhr.statusText);
      }
    }
  };

  // 发送请求
  xhr.send();
}

// 使用 Fetch API 进行跨域请求 (CORS)
async function fetchCorsData() {
  try {
    // 发起 GET 请求
    const response = await fetch('https://example.com/api/data', {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json'
      },
      // 如果目标服务器需要凭证（如 cookies），则需要设置此选项
      credentials: 'include'
    });

    // 检查响应状态码是否为 2xx
    if (!response.ok) {
      throw new Error('Network response was not ok ' + response.statusText);
    }

    // 解析 JSON 响应数据
    const data = await response.json();
    console.log('Fetched data:', data);
  } catch (error) {
    console.error('Fetch error:', error);
  }
}

// 使用 JSONP 进行跨域请求（适用于不支持 CORS 的旧服务器）
function jsonpRequest(url, callbackName) {
  // 创建一个 <script> 元素
  var script = document.createElement('script');

  // 设置 script 标签的 src 属性为要请求的 URL
  script.src = `${url}?callback=${callbackName}`;

  // 将 script 标签添加到 DOM 中
  document.body.appendChild(script);
}

// 定义 JSONP 回调函数
function handleJsonpData(data) {
  console.log('JSONP Data:', data);
}

// 调用 JSONP 请求
jsonpRequest('https://example.com/api/data', 'handleJsonpData');

解释说明：

1. XMLHttpRequest：这是传统的 AJAX 请求方式，通过 XMLHttpRequest 对象可以发起跨域请求。为了确保跨域请求成功，目标服务器必须支持 CORS（跨域资源共享）。

2. Fetch API：现代浏览器推荐使用 fetch 方法来发起网络请求。它返回一个 Promise，因此可以使用 async/await 来简化异步代码。同样，目标服务器必须支持 CORS。

3. JSONP：这是一种较老的技术，用于绕过浏览器的同源策略限制。它通过动态插入 <script> 标签来加载远程资源，并执行回调函数。不过，JSONP 只能发送 GET 请求，且安全性较低，通常只在不支持 CORS 的旧系统中使用。