常见的javascript跨域通信方法

常见的JavaScript跨域通信方法有以下几种：

JSONP

JSONP是一种跨域通信的方法，它利用了script标签没有跨域限制的特点，通过在服务端动态生成JSONP的响应，实现了跨域从而从而实现数据的交互。具体实现步骤如下：

1. 客户端（例如：浏览器）请求包含一个回调函数名的url（例如：http://example.com/api?callback=foo）。
2. 服务器端接收到请求后，生成需要传递给客户端的数据，并将数据通过回调函数的形式返回。
3. 由于服务器返回的是JavaScript代码，客户端不需要对数据进行解析处理，直接调用执行即可。

示例代码如下：

客户端（index.html）：

<script type="text/javascript">
   function foo(data) {
       console.log(data)
   }
</script>
<script type="text/javascript" src="http://example.com/api?callback=foo"></script>

服务器端（http://example.com/api）：

<?php
   $data = array('name' => '张三', 'age' => 18);
   $callback = $_GET['callback'];
   echo $callback . '(' . json_encode($data) . ')';
?>

注意： 

1. 回调函数名要与客户端中定义的函数名一致。 

2. JSONP只支持GET方式的请求。

## CORS

CORS是“Cross-Origin Resource Sharing”的缩写，一种跨域资源共享的标准，它允许在同源策略下，浏览器向一个跨域资源的服务器发出XMLHttpRequest请求，从而克服了AJAX 只能同源使用的限制。实现步骤如下：

1. 在服务端添加CORS的响应头，允许跨域访问。

Access-Control-Allow-Origin: *

2. 客户端发送Ajax请求时，设置withCredentials为true，表示需要跨域发送Cookie等认证信息。

示例代码如下：

客户端（index.html）：

服务器端（http://example.com/api）：

header('Access-Control-Allow-Origin: *');
echo 'Cross-domain request successful';
```

注意：

1.CORS请求分为简单请求（GET 和 POST请求，且不能携带自定义请求头）和复杂请求（非简单请求）两种，简单请求会在浏览器自动发出CORS预处理请求，而复杂请求需要在服务端手动添加CORS预处理响应。

2.xhr.withCredentials = true; 这句很重要，表示需要随跨域请求发送相应的认证信息，如Cookie等。