如何使用Ajax请求携带Cookie和自定义请求头

在Web开发中，Ajax请求是一种常用的技术，用于在不刷新页面的情况下与服务器进行通信。在某些情况下，我们需要在Ajax请求中携带Cookie和自定义请求头。下面将介绍如何在跨域和同域的情况下实现这一需求。
一、同域请求
同域请求是指请求的域名、端口和协议与当前页面完全相同。在这种情况下，我们可以直接在Ajax请求中设置withCredentials属性为true，以允许携带Cookie和自定义请求头。

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/api/data', true);
xhr.withCredentials = true;
xhr.setRequestHeader('Authorization', 'Bearer ' + token); // 自定义请求头
xhr.send();

在上面的代码中，我们创建了一个新的XMLHttpRequest对象，并使用open方法指定了请求的URL、请求方法和是否异步。然后，我们将withCredentials属性设置为true，以允许携带Cookie和自定义请求头。接下来，我们使用setRequestHeader方法设置了自定义的请求头。最后，我们调用send方法发送请求。
二、跨域请求
跨域请求是指请求的域名、端口或协议与当前页面不同。在默认情况下，浏览器会阻止跨域请求携带Cookie和自定义请求头，以防止潜在的安全风险。但是，我们可以通过在服务器端设置适当的响应头来实现跨域请求携带Cookie和自定义请求头。
首先，在服务器端设置响应头Access-Control-Allow-Origin为当前页面的域名，并允许携带Cookie和自定义请求头。例如：

Access-Control-Allow-Origin: http://example.com
Access-Control-Allow-Credentials: true

然后，在客户端的Ajax请求中设置withCredentials属性为true，并使用JSONP或CORS技术进行跨域请求。

1. JSONP（JSON with Padding）是一种通过动态创建<script>标签来实现跨域请求的方法。它利用了浏览器允许跨域加载脚本的特性。下面是一个使用JSONP进行跨域请求的示例：

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

   在上面的代码中，我们创建了一个新的<script>标签，并设置其src属性为跨域请求的URL。然后，我们将该标签添加到文档的头部，以触发跨域请求。当服务器响应后，会调用指定的回调函数（在本例中为myFunction），并将数据作为参数传递给该函数。
2. CORS（Cross-Origin Resource Sharing）是一种通过设置响应头来实现跨域请求的方法。它允许服务器明确指定哪些资源可以被哪些源访问。下面是一个使用CORS进行跨域请求的示例：

   var xhr = new XMLHttpRequest();
   xhr.open('GET', 'http://example.com/api/data', true);
   xhr.withCredentials = true;
   xhr.setRequestHeader('Authorization', 'Bearer ' + token); // 自定义请求头
   xhr.send();

   在上面的代码中，我们创建了一个新的XMLHttpRequest对象，并使用open方法指定了请求的URL、请求方法和是否异步。然后，我们将withCredentials属性设置为true，以允许携带Cookie和自定义请求头。接下来，我们使用setRequestHeader方法设置了自定义的请求头。最后，我们调用send方法发送请求。注意，由于使用了CORS技术，服务器端必须设置适当的响应头来允许跨域请求。例如：

   Access-Control-Allow-Origin: http://example.com
   Access-Control-Allow-Credentials: true