Apache 中启用了 CORS，但 AJAX 无法正常工作（chrome 表示不允许来源）

Ajax

解决 Apache 中 CORS 问题的方法

在现代网页开发中，使用 Ajax 进行跨域请求是很常见的。然而，在使用 Apache 服务器时，有时会遇到 CORS（跨源资源共享）的问题，这可能导致 Ajax 请求无法正常工作。Chrome 浏览器可能会显示“不允许来源”的错误信息，这意味着服务器未正确配置以允许跨域请求。下面将介绍如何解决这个问题，并提供案例代码作为示例。

问题分析

CORS 问题通常出现在服务器未正确配置的情况下。当客户端（如浏览器）向服务器发送 Ajax 请求时，服务器需要在响应头中包含特定的 CORS 头信息，以指示哪些来源或方法被允许访问资源。在 Apache 服务器上，可以通过配置 .htaccess 文件来解决这个问题。

解决方法

首先，确保你有权限编辑服务器上的 .htaccess 文件。然后，在文件顶部添加如下代码：

apache
<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
    Header set Access-Control-Allow-Methods "GET, POST, OPTIONS"
    Header set Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept"
</IfModule>

上述代码将在服务器响应中设置 CORS 头信息，允许所有来源的 GET、POST 和 OPTIONS 请求，并允许特定的请求头被传递。请注意，* 符号允许来自任何域的请求。在实际生产环境中，你可能需要更严格的设置来限制访问来源。

保存 .htaccess 文件后，重新加载服务器配置或重启服务器，以使更改生效。这样，服务器就能正确处理跨域请求了。

示例代码

假设你有一个使用 Ajax 发起 GET 请求的 JavaScript 代码：

Javascript
const xhr = new XMLHttpRequest();
const url = 'https://your-server.com/api/data';
xhr.open('GET', url, true);
xhr.onreadystatechange = function () {
    if (xhr.readyState === XMLHttpRequest.DONE) {
        if (xhr.status === 200) {
            // 请求成功
            const responseData = JSON.parse(xhr.responseText);
            // 处理返回的数据
        } else {
            // 请求失败
            console.error('请求失败');
        }
    }
};
xhr.send();

以上代码展示了一个简单的 Ajax GET 请求。确保在你的实际代码中将 url 替换为你自己服务器的地址。

通过配置 Apache 服务器的 .htaccess 文件，并确保在客户端代码中正确使用 Ajax 请求，你就能解决在 Chrome 浏览器中出现的 CORS 问题，从而顺利完成跨域请求。