Ajax跨域的完美解决方案

首先，我们需要了解什么是Ajax跨域以及为什么会出现跨域问题。

Ajax跨域是指在浏览器端使用Ajax异步请求数据时，若请求的URL与当前页面URL的域名、协议或端口号不一致，则会出现跨域问题。浏览器为了保障用户的安全，禁止页面在跨域的情况下获取数据。

下面是Ajax跨域的完美解决方案：

解决方案一：jsonp跨域请求

jsonp（JSON with Padding）是一种跨域数据请求方案，它利用了script标签可以跨域引入文件的特点，将JSON数据包裹在回调函数中，以便能够在页面中直接调用数据，从而实现跨域数据获取。

示例一

以下是使用jsonp实现的跨域请求示例：

function jsonp(url,callback){
  var script = document.createElement('script');
  script.setAttribute('src',url+'?callback='+callback);
  document.getElementsByTagName('head')[0].appendChild(script);
}

function getData(data){
  console.log(data);
}

jsonp('http://example.com/data', 'getData');

在上面的示例中，我们定义了一个jsonp函数，传入url和回调函数名callback。我们在生成一个script标签，并将src属性设为url+'?callback='+callback。这样，发送的请求就是一个js脚本，而返回的数据将被包裹在回调函数中，直接执行该函数以获取数据。

示例二

在jQuery中，jsonp请求可以这样实现：

$.ajax({
    url: 'http://example.com/data',
    dataType: 'jsonp',
    jsonp: 'callback',
    jsonpCallback: 'getData',
    success: function(data){
      console.log(data);
    }
});

function getData(data){
  console.log(data);
}

在这个示例中，我们通过ajax函数发送一个jsonp请求。我们设置dataType为jsonp，jsonp为回调函数的参数名，jsonpCalback为回调函数的名称。同样是使用getData函数接收回调数据。

解决方案二：CORS跨域请求

CORS（Cross-Origin Resource Sharing）是一个W3C标准，通过在服务器端设置响应头，允许跨域资源共享。在跨域请求时，浏览器将先发送一个OPTIONS请求，查询服务器是否允许请求跨域资源。如果服务器响应头中设置了Access-Control-Allow-Origin，则代表该服务器允许跨域请求。

示例一

以下是使用CORS实现的跨域请求示例：

在服务器端设置响应头：

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Headers: *');
header('Access-Control-Allow-Methods: GET,POST,PUT,DELETE,OPTIONS');

在客户端发送请求：

$.ajax({
    url: 'http://example.com/data',
    type: 'GET',
    success: function(data){
        console.log(data);
    },
    error: function(xhr, type){
        console.log(xhr, type);
    }
});

在上面的示例中，我们在服务器端设置了响应头中Access-Control-Allow-Origin为*，代表允许所有域名跨域访问。在客户端发送GET请求，可以成功获取数据。

示例二

在Vue.js中，使用axios库发送异步请求：

axios.get('http://example.com/data')
    .then(res => {
        console.log(res.data);
    })
    .catch(err => {
        console.log(err);
    });

在上面的示例中，我们使用axios.get发送GET请求，axios会自动添加CORS请求头，并在成功时返回数据，失败时返回错误信息。

总结：

以上是Ajax跨域的完美解决方案，包括jsonp和CORS两种跨域请求方式。需要注意的是，jsonp只能发送GET请求，而CORS可以发送任意请求。在使用CORS时，需要在服务器端设置响应头，以便允许跨域请求。