JavaScript如何实现跨域请求

JavaScript 如何实现跨域请求

在前端开发中，常常遇到需要请求不同域名下的 API 接口的情况，此时我们就需要了解 JavaScript 如何实现跨域请求。

在同源策略限制下，JavaScript 无法直接向不同域名进行请求数据，因此需要通过一些技术手段来实现跨域请求，以下是几种通用的实现方式。

1. JSONP（JSON with Padding）

JSONP 是一种跨域请求的常用技术。它不是一种 AJAX 请求，而是一种类似于动态生成 script 标签的请求方式。

具体实现方式如下：

在客户端页面中定义一个回调函数（callback），并将此函数的名称作为参数传递给跨域请求接口。

<script>
    var callback = function(data) {
        console.log(data);
    }
    var script = document.createElement('script');
    script.src = 'http://api.example.com/data?callback=callback';
    document.body.appendChild(script);
</script>

在服务端接口中，接收到请求后，根据参数传递的函数名称，生成一个一段 JavaScript 代码，返回给客户端，该 JavaScript 代码会调用客户端传递的回调函数，并将数据作为参数传递给回调函数。

$callback = $_GET['callback'];
$data = array('foo' => 'bar');
echo $callback . '(' . json_encode($data) . ')';

需要注意的是，JSONP 只支持 GET 请求，不能支持 POST 请求。同时，JSONP 存在一定的安全风险，因为 API 接口必须返回可执行的 JavaScript 代码，程序员需要对 API 接口进行严格的安全策略限制。

1. CORS（Cross-Origin Resource Sharing）

CORS 是一种更加安全和简单的跨域请求技术。它通过在服务端设置响应头部来授权不同域名下的客户端访问指定的 API 接口。

具体实现方式如下：

在服务端设置响应头部 Access-Control-Allow-Origin。该头部参数表示允许访问的域名，这里使用通配符 * 表示允许任何域名访问。

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST');
header('Access-Control-Allow-Headers: X-Requested-With');

在客户端模拟 AJAX 请求，并在请求头部中设置 Origin。Origin 表示请求发起的源域，服务端通过 Origin 头部来判断是否允许该请求访问。

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://api.example.com/data');
xhr.setRequestHeader('Origin', 'http://www.example.com');
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
        console.log(xhr.responseText);
    }
};
xhr.send();

需要注意的是，CORS 可以支持 GET、POST 等多种请求方式，并且比 JSONP 更加安全和灵活。

说了这么多，小小的提示一下，如果你是使用 vue 或 react 等框架，跨域问题可以在 webpack 里配置即可。