AJAX中怎么利用 CORS解决跨域

CORS（跨域资源共享）是一种浏览器机制，用于解决 AJAX 请求中的跨域问题。当 AJAX 请求从一个域名向另一个域名发送请求时，如果两个域名不相同，浏览器会阻止请求，CORS 就是为了解决这个问题而诞生的机制。在本文中，我将向您介绍如何使用 CORS 来解决跨域问题。

## 使用 CORS 前的跨域问题
在介绍 CORS 之前，我们先了解一下在没有 CORS 时，跨域请求会遇到的问题。在 AJAX 中，使用 XMLHttpRequest 对象发送请求时，同源策略会限制请求的跨域。这意味着在浏览器中发送 AJAX 请求时，只能向当前域名下的接口发送请求，而无法向其他域名下的接口发送请求。这就导致了开发者无法在前端直接访问其他域名下的接口。

## 通过服务器处理 CORS 请求
要解决跨域问题，一种常见的方式是通过服务器进行处理。服务器在接收到前端发送的跨域请求后，要设置相应的响应头来允许来自其他域名的请求。在服务器端，可以通过设置 `Access-Control-Allow-Origin` 响应头来指定允许访问的域名列表，例如：

`html

Access-Control-Allow-Origin: example.com

`

上述代码将允许来自 example.com 域名的请求访问当前接口。如果要允许多个域名访问，可以将域名以逗号分隔，例如：

`html

Access-Control-Allow-Origin: example.com, foo.bar

`

除了 `Access-Control-Allow-Origin` 头之外，还可以设置其他相关的响应头，以满足更严格的跨域需求。例如，可以设置 `Access-Control-Allow-Methods` 头允许的请求方法，`Access-Control-Allow-Headers` 头允许的请求头，以及 `Access-Control-Allow-Credentials` 头是否允许发送包含凭据的请求。

## 前端使用 CORS 发送跨域请求
在使用 CORS 发送跨域请求时，前端需要在发送请求的时候，添加相应的请求头以进行标识。例如，在使用 XMLHttpRequest 对象发送 GET 请求时，可以通过设置 `withCredentials` 属性来标识请求包含凭据：

`html

var xhr = new XMLHttpRequest();

xhr.withCredentials = true;

xhr.open('GET', 'http://example.com/api', true);

xhr.send();

`

上述代码中，`xhr.withCredentials = true` 表示请求包含凭据，例如 cookie 等用户身份信息。此外，还可以设置其他相关的请求头，例如 `Content-Type`、`Authorization` 等。

以上就是使用 CORS 解决跨域问题的方法。通过服务器设置响应头，与前端发送请求时添加请求头，可以实现跨域请求的安全访问。