用前端代码解决ajax的跨域问题

在前端代码中，可以通过使用JSONP或CORS来解决Ajax的跨域问题。

1. JSONP

使用JSONP的原理是利用script标签可以跨域加载资源的特性，将需要获取数据的请求封装成一个回调函数作为参数传递给后台，后台在返回数据时将数据作为回调函数的参数返回，从而实现跨域请求。

举个例子：

function jsonp(url, callback) {
  let script = document.createElement("script");
  script.src = url + "?callback=" + callback;
  document.body.appendChild(script);
}

// 调用
jsonp("http://www.example.com/api/data", "handleData");
function handleData(data) {
  console.log(data);
}

2. CORS

使用CORS的原理是在服务端设置响应头，允许特定的域名访问资源。在前端中，只需要设置XMLHttpRequest对象的withCredentials属性为true，就可以发送跨域请求。

举个例子：

let xhr = new XMLHttpRequest();
xhr.withCredentials = true;
xhr.open("GET", "http://www.example.com/api/data");
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.send();

需要注意的是，服务端也需要设置响应头，允许特定的域名访问资源，例如：

Access-Control-Allow-Origin: http://www.example.com
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: Content-Type