AJAX的跨域访问-两种有效的解决方法介绍

当浏览器从一个域名中的页面跳转到另一个域名的页面时，就会发生所谓的跨域问题。因此网页中的 AJAX 异步请求有时会由于跨域原因而不能正常返回数据。下面将介绍两种有效的跨域访问 AJAX 的解决方法。

方法一：JSONP

在前端中，通过 JSONP 的方式可以实现跨域请求，并且使用比较简便。JSONP 是通过使用 script 标签进行异步请求，使用 callback 函数来传递数据。

JSONP 的基本原理如下：

1. 在前端定义一个 callback 函数，函数名作为参数传递到后端；
2. 后端将数据包装成一个 callback 函数调用的格式，并将此代码返回给前端；
3. 前端收到数据后，根据定义的 callback 函数名执行该函数，在函数内处理接收到的数据。

以下是使用 jQuery 库实现的 JSONP 请求示例：

$.ajax({
  url: "http://www.example.com/data.php?callback=?",
  dataType: "jsonp",
  success: function(data) {
    console.log(data);
  }
});

其中，url 参数中加入 callback=?，这样的话，在请求时 jQuery 会自动替换该字符串为一个随机的函数名。后端将数据放在该函数名调用的参数中，即可在前端接收到数据并解析。

方法二：CORS

CORS（Cross-Origin Resource Sharing，跨域资源共享）是一个 W3C 标准，已经得到了广泛支持。通过在服务端添加一些响应头信息，即可让浏览器支持跨域的 AJAX 请求。

以下是实现 CORS 跨域的基本响应头：

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET,POST,PUT,DELETE
Access-Control-Allow-Headers: Content-Type

其中，Access-Control-Allow-Origin 响应头指定了可以访问该资源的域名或通配符 *，Access-Control-Allow-Methods 响应头指定了所支持的 HTTP 请求方法，Access-Control-Allow-Headers 响应头指定了所支持的自定义请求头。

以下是使用 XMLHttpRequest 对象实现的 CORS 跨域 AJAX 示例：

var xhr = new XMLHttpRequest();
xhr.open('GET', "http://www.example.com/data.php", true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.withCredentials = true;
xhr.send();

其中，setRequestHeader 方法设置了请求头，withCredentials 属性明确指定了使用跨域 cookies。

以上就是 AJAX 跨域访问的两种有效解决方法。需要注意的是，各浏览器对跨域限制的限制程度有所不同，开发人员在使用 AJAX 跨域时需要多加注意。