AJAX跨域问题解决方案详解

那么首先我们需要了解什么是 AJAX 跨域问题。

当我们在网页上使用 AJAX 技术向后端服务器请求数据时，若该请求的服务器与当前网页所在的域名不一致，便会出现跨域问题，也就是所谓的“跨域访问”。

为了解决 AJAX 跨域问题，我们可以采用以下几种方案：

1、JSONP

JSONP 是一种通过添加一个 script 标签来解决跨域访问的方案。实现过程如下：

1. 客户端（前端）在页面上创建一个唯一函数名并注册到 window 上，让一个函数在服务器完成后被调用，例如：

function handleData(data) {
  console.log('数据内容：', data);
}

1. 客户端通过添加一个 script 标签来动态获取数据，例如：

<script src="http://example.com/data.php?callback=handleData"></script>

1. 服务端通过接收到客户端发送的请求参数，并将需要返回的数据通过 JSON 格式发送给客户端，其中 callback 参数值就是客户端注册的函数名，例如：

handleData({"name": "小明", "age": 18});

1. 客户端接收到数据后便会立即回调注册的函数 handleData，从而获取服务器返回的数据。

JSONP 的缺点在于无法发送 POST 请求，而且要求服务器必须支持 JSONP 的方式返回数据。

2、CORS

CORS 是一种通过添加特定请求头来支持跨域访问的方案。实现过程如下：

1. 客户端发送 AJAX 请求时，在请求头中添加 Origin，例如：

const xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/data');
xhr.setRequestHeader('Origin', 'http://localhost:3000'); // 这里设置当前网页所在的域名和端口
xhr.send();

1. 服务端接收到请求后，判断该请求是否跨域，如果是则在响应头中增加 Access-Control-Allow-Origin，例如：

header('Access-Control-Allow-Origin: http://localhost:3000'); // 这里设置可访问的域名和端口

1. 客户端接收到响应时，如果响应头中有 Access-Control-Allow-Origin，则该请求可以正常返回，否则将无法获取响应数据。

CORS 的优点在于支持大多数 HTTP 请求方式，可以自由设置允许访问的域名和端口，但缺点在于需要请求服务器设置 CORS 相关的响应头。

3、代理

代理是一种通过配置服务器，让服务器间接访问目标服务器获取数据的方案，可以有效解决跨域问题。实现过程如下：

1. 客户端（前端）向自己的服务器发送 AJAX 请求，例如：

const xhr = new XMLHttpRequest();
xhr.open('GET', '/data'); // 这里发送请求的 url 是本地服务器的 url
xhr.send();

1. 本地服务器接收到请求后，将目标服务器的地址和请求参数一起发送给服务器，例如：

// 目标服务器地址
$remoteUrl = 'http://example.com/data';
// 获取客户端发送来的请求参数
$requestData = file_get_contents('php://input');
// 访问目标服务器并获取响应结果
$response = file_get_contents($remoteUrl . '?' . $requestData);
echo $response;

1. 客户端接收到响应后，便获取到了目标服务器返回的数据。

代理的优点在于可以跨域访问任何服务器，不需要服务器端对跨域做任何特殊处理，但缺点在于会增加服务器的负载和网络请求的延迟。

以上三种方案，JSONP 适用于无法修改服务器端代码的情况，CORS 适用于需要跨域访问支持 XMLHttpRequest 和 AJAX 的 API 的情况，代理适用于追求兼容性和实现灵活性的情况。

示例说明

1、JSONP 示例

客户端调用方式：

<button onclick="getJsonpData()">点击加载数据</button>

<script>
  function handleData(data) {
    console.log('JSONP 数据内容：', data);
  }

  function getJsonpData() {
    const script = document.createElement('script');
    script.src = 'http://localhost:3000/jsonp?callback=handleData';
    document.body.appendChild(script);
  }
</script>

服务端代码：

<?php
header('Content-Type:application/javascript; charset=utf-8');

$callback = $_GET['callback'];
$content = '{"name": "小明", "age": 18}';

echo $callback . '(' . $content . ')';

2、CORS 示例

客户端调用方式：

<button onclick="getCorsData()">点击加载数据</button>

<script>
  function getCorsData() {
    const xhr = new XMLHttpRequest();
    xhr.onload = function() {
      console.log('CORS 数据内容：', JSON.parse(xhr.responseText));
    };
    xhr.open('GET', 'http://localhost:3000/cors');
    xhr.setRequestHeader('Origin', 'http://localhost:8080');
    xhr.send();
  }
</script>

服务端代码：

<?php
header('Access-Control-Allow-Origin:http://localhost:8080');
header('Content-Type:application/json; charset=utf-8');

echo '{"name": "小明", "age": 18}';

3、代理示例

客户端调用方式：

<button onclick="getProxyData()">点击加载数据</button>

<script>
  function getProxyData() {
    const xhr = new XMLHttpRequest();
    xhr.onload = function() {
      console.log('代理数据内容：', JSON.parse(xhr.responseText));
    };
    xhr.open('POST', 'http://localhost:3000/proxy');
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.send(JSON.stringify({
      url: 'http://example.com/data',
      data: {name: '小明', age: 18}
    }));
  }
</script>

服务端代码：

<?php
header('Content-Type:application/json; charset=utf-8');

$requestData = json_decode(file_get_contents('php://input'), true);

// 构建目标服务器地址和请求参数
$remoteUrl = $requestData['url'];
$params = http_build_query($requestData['data']);

// 访问目标服务器并获取响应结果
$response = file_get_contents($remoteUrl . '?' . $params);

echo $response;