WordPress跨域调用Ajax接口时因CORS策略严格导致后台数据无法正常提交 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

WordPress 跨域 AJAX 调用：突破 CORS 策略的重重迷雾

大家好！今天我们来聊聊 WordPress 开发中一个常见的挑战：跨域 AJAX 调用。尤其是当 CORS (Cross-Origin Resource Sharing) 策略变得严格时，后台数据无法正常提交，这着实让人头疼。别担心，今天我就带领大家深入剖析 CORS 策略，并提供多种解决方案，确保你的 WordPress 项目能够顺利地进行跨域 AJAX 通信。

1. CORS 策略：安全的卫士，恼人的阻碍

首先，我们需要理解 CORS 策略的本质。CORS 是一种浏览器安全机制，用于限制来自不同源（Origin）的网页脚本访问当前源的资源。这里的“源”由协议（例如 http 或 https）、域名（例如 example.com）和端口（例如 80 或 443）组成。只有当这三个要素完全一致时，才被认为是同源。

举个例子，如果你的 WordPress 站点运行在 https://www.example.com，而你的 AJAX 请求试图从 https://api.example.com 获取数据，那么就会触发 CORS 策略，因为域名不同。

CORS 的存在是为了保护用户免受恶意跨站脚本攻击。然而，在实际开发中，我们经常需要在不同的子域之间、不同的服务之间进行数据交互，这就需要我们巧妙地绕过 CORS 的限制。

2. 浏览器如何处理 CORS？

当浏览器发起跨域请求时，会执行以下步骤：

检查请求类型： 浏览器会根据请求类型判断是否需要进行预检请求 (Preflight Request)。对于一些“简单请求”，浏览器会直接发送请求。对于其他请求（例如，使用 PUT、DELETE 方法，或者设置了非标准的 Content-Type 头部），浏览器会先发送一个 OPTIONS 请求到服务器，询问服务器是否允许该跨域请求。
预检请求 (Preflight Request)： OPTIONS 请求包含以下头部：
- Origin: 指示请求的来源。
- Access-Control-Request-Method: 指示实际请求将使用的 HTTP 方法 (例如 POST, PUT)。
- Access-Control-Request-Headers: 指示实际请求将包含的自定义头部。
服务器响应预检请求： 服务器收到 OPTIONS 请求后，会检查请求的合法性，并返回相应的响应头部。重要的响应头部包括：
- Access-Control-Allow-Origin: 指定允许访问资源的来源。可以是具体的域名，也可以是通配符 *，表示允许所有来源访问。
- Access-Control-Allow-Methods: 指定允许使用的 HTTP 方法。
- Access-Control-Allow-Headers: 指定允许使用的自定义头部。
- Access-Control-Max-Age: 指定预检请求的缓存时间。
发送实际请求： 如果服务器允许该跨域请求，浏览器才会发送实际的 AJAX 请求。
检查响应头部： 浏览器收到实际请求的响应后，会检查响应头部是否包含 Access-Control-Allow-Origin 头部，以及其值是否与请求的来源匹配。如果不匹配，浏览器会阻止 JavaScript 代码访问响应数据。

3. 常见的 CORS 错误

最常见的 CORS 错误是：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at [URL]. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

这个错误表示服务器没有返回 Access-Control-Allow-Origin 头部，或者头部的值与请求的来源不匹配。

4. WordPress 解决 CORS 问题的方案

现在我们来讨论如何在 WordPress 中解决 CORS 问题。以下是几种常用的方案：

4.1. 修改 .htaccess 文件 (Apache 服务器)

如果你的 WordPress 站点运行在 Apache 服务器上，你可以通过修改 .htaccess 文件来设置 CORS 头部。在 .htaccess 文件中添加以下代码：

<IfModule mod_headers.c>
    <FilesMatch ".(ttf|ttc|otf|eot|woff|woff2|font.css|css|js)$">
        <IfModule mod_headers.c>
            Header set Access-Control-Allow-Origin "*"
        </IfModule>
    </FilesMatch>
</IfModule>

这段代码的作用是：

只对特定的文件类型（字体文件、CSS 文件、JavaScript 文件）设置 CORS 头部。
设置 Access-Control-Allow-Origin 为 *，允许所有来源访问这些资源。

警告： 允许所有来源访问可能存在安全风险。如果你的 API 只需要允许特定的域名访问，建议将 * 替换为具体的域名。

4.2. 修改 Nginx 配置文件 (Nginx 服务器)

如果你的 WordPress 站点运行在 Nginx 服务器上，你需要修改 Nginx 的配置文件来设置 CORS 头部。找到你的站点配置文件（通常位于 /etc/nginx/sites-available/ 目录下），并在 server 块中添加以下代码：

server {
    # ... 其他配置 ...

    location ~* .(ttf|ttc|otf|eot|woff|woff2|font.css|css|js)$ {
        add_header Access-Control-Allow-Origin *;
    }

    # ... 其他配置 ...
}

这段代码的作用与 .htaccess 文件中的代码类似，也是只对特定的文件类型设置 CORS 头部，并允许所有来源访问。

警告： 同样，为了安全起见，建议将 * 替换为具体的域名。

4.3. 在 WordPress 的 functions.php 文件中设置 CORS 头部

你也可以在 WordPress 主题的 functions.php 文件中通过 PHP 代码来设置 CORS 头部。这种方式更加灵活，可以根据需要动态地设置 CORS 头部。

<?php

add_action( 'send_headers', 'add_cors_http_header' );

function add_cors_http_header() {
    header( 'Access-Control-Allow-Origin: ' . get_http_origin() );
    header( 'Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE' );
    header( 'Access-Control-Allow-Credentials: true' );
    header( 'Access-Control-Allow-Headers: Content-Type, Authorization, X-Requested-With' );
}

add_action( 'admin_init', function() {

    if ( isset( $_SERVER['REQUEST_METHOD'] ) && $_SERVER['REQUEST_METHOD'] == 'OPTIONS' ) {
        header( 'Access-Control-Allow-Origin: ' . get_http_origin() );
        header( 'Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE' );
        header( 'Access-Control-Allow-Credentials: true' );
        header( 'Access-Control-Allow-Headers: Content-Type, Authorization, X-Requested-With' );
        exit(0);
    }
});

function get_http_origin() {
    $origin = isset($_SERVER['HTTP_ORIGIN']) ? $_SERVER['HTTP_ORIGIN'] : '';
    $allowed_origins = array(
        'https://www.example.com',
        'https://api.example.com',
    );

    if (in_array($origin, $allowed_origins)) {
        return $origin;
    } else {
        return 'https://www.example.com'; // Default origin
    }
}

这段代码做了以下事情：

使用 add_action( 'send_headers', 'add_cors_http_header' ) 钩子，在发送 HTTP 头部之前执行 add_cors_http_header 函数。
add_cors_http_header 函数设置了 Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Credentials 和 Access-Control-Allow-Headers 头部。
get_http_origin 函数用于获取请求的来源，并根据 $allowed_origins 数组判断是否允许该来源访问。如果允许，则返回该来源；否则，返回默认的来源。
admin_init 钩子用于处理预检请求 (OPTIONS)。

重要： 在 $allowed_origins 数组中，你需要替换为你允许访问的域名。

4.4. 使用 WordPress 插件

除了手动修改配置文件和编写代码之外，你还可以使用 WordPress 插件来解决 CORS 问题。有很多插件可以帮助你设置 CORS 头部，例如：

WP CORS
Enable CORS

这些插件通常提供了简单的界面，让你无需编写代码即可轻松设置 CORS 头部。

5. 示例代码：前端 AJAX 请求

假设你的 WordPress 站点运行在 https://www.example.com，并且你想要从 https://api.example.com/data 获取数据。以下是一个使用 JavaScript (fetch API) 发起 AJAX 请求的示例：

fetch('https://api.example.com/data', {
    method: 'GET',
    mode: 'cors', // 开启 CORS 模式
    headers: {
        'Content-Type': 'application/json'
    }
})
.then(response => {
    if (!response.ok) {
        throw new Error('Network response was not ok');
    }
    return response.json();
})
.then(data => {
    console.log(data); // 处理获取到的数据
})
.catch(error => {
    console.error('There has been a problem with your fetch operation:', error);
});

这段代码的关键在于 mode: 'cors'，它告诉浏览器使用 CORS 模式发起请求。

6. 示例代码：使用 WordPress REST API

WordPress REST API 提供了一种标准化的方式来访问 WordPress 的数据。你可以使用 REST API 来创建自定义的 API 接口，并设置 CORS 头部。

首先，你需要创建一个自定义的 REST API 端点。在你的主题的 functions.php 文件中添加以下代码：

<?php

add_action( 'rest_api_init', function () {
  register_rest_route( 'myplugin/v1', '/data', array(
    'methods' => 'GET',
    'callback' => 'my_awesome_func',
  ) );
});

function my_awesome_func( WP_REST_Request $request ) {
  // 获取参数
  $param = $request->get_param( 'param' );

  // 处理数据
  $data = array(
    'message' => 'Hello, world!',
    'param' => $param,
  );

  return $data;
}

这段代码创建了一个名为 myplugin/v1/data 的 REST API 端点，它接受 GET 请求，并返回一个包含 message 和 param 字段的 JSON 对象。

然后，你需要设置 CORS 头部。可以使用之前提到的 add_cors_http_header 函数来设置 CORS 头部。

最后，你可以使用 JavaScript 发起 AJAX 请求来访问这个 REST API 端点：

fetch('https://www.example.com/wp-json/myplugin/v1/data?param=value', {
    method: 'GET',
    mode: 'cors',
    headers: {
        'Content-Type': 'application/json'
    }
})
.then(response => {
    if (!response.ok) {
        throw new Error('Network response was not ok');
    }
    return response.json();
})
.then(data => {
    console.log(data); // 处理获取到的数据
})
.catch(error => {
    console.error('There has been a problem with your fetch operation:', error);
});

7. 调试 CORS 问题

调试 CORS 问题可能比较棘手。以下是一些有用的技巧：

使用浏览器的开发者工具： 浏览器的开发者工具可以显示 CORS 错误信息，并提供有关请求和响应头部的详细信息。
检查服务器的响应头部： 确保服务器返回了正确的 CORS 头部，包括 Access-Control-Allow-Origin、Access-Control-Allow-Methods 和 Access-Control-Allow-Headers。
使用在线 CORS 检测工具： 有一些在线工具可以帮助你检测 CORS 配置是否正确。

8. 安全注意事项

*避免使用通配符 `：** 尽可能将Access-Control-Allow-Origin设置为具体的域名，而不是使用通配符*`。
验证请求的来源： 在服务器端验证请求的来源，确保只允许来自可信域名的请求访问你的 API。
使用 HTTPS： 使用 HTTPS 可以保护数据在传输过程中的安全。

9. 代理服务器

如果由于某些原因，你无法直接修改服务器配置，或者你的第三方 API 不支持 CORS，你可以使用代理服务器来解决 CORS 问题。代理服务器位于你的前端和第三方 API 之间，它会接收你的前端请求，然后将请求转发到第三方 API，并将响应返回给你的前端。由于代理服务器与你的前端是同源的，因此不会触发 CORS 策略。

你可以使用 Node.js、Python 或其他语言来创建代理服务器。以下是一个使用 Node.js 和 http-proxy 模块创建代理服务器的示例：

const http = require('http');
const httpProxy = require('http-proxy');

const proxy = httpProxy.createProxyServer({});

const server = http.createServer((req, res) => {
  // 设置 CORS 头部
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');

  // 代理请求
  proxy.web(req, res, {
    target: 'https://api.example.com', // 第三方 API 的地址
    changeOrigin: true, // 修改 Origin 头部
  });
});

server.listen(3000, () => {
  console.log('Proxy server listening on port 3000');
});

这段代码创建了一个简单的代理服务器，它监听 3000 端口，并将所有请求转发到 https://api.example.com。 changeOrigin: true 选项会修改请求的 Origin 头部，使其与代理服务器的域名一致。

10. JSONP

JSONP (JSON with Padding) 是一种古老的跨域解决方案，它利用了 <script> 标签可以跨域加载资源的特性。虽然 JSONP 存在一些安全风险，并且只能用于 GET 请求，但在某些情况下仍然可以使用。

要使用 JSONP，你需要：

在服务器端： 将 JSON 数据包装在一个回调函数中。
在客户端： 动态创建一个 <script> 标签，并将 src 属性设置为服务器端的 URL，并指定回调函数的名称。

以下是一个使用 JSONP 的示例：

服务器端 (PHP):

<?php
header('Content-Type: application/javascript');
$data = array('message' => 'Hello, world!');
$callback = $_GET['callback'];
echo $callback . '(' . json_encode($data) . ');';
?>

客户端 (JavaScript):

function handleResponse(data) {
  console.log(data); // 处理获取到的数据
}

function jsonp(url, callback) {
  const script = document.createElement('script');
  script.src = url + '?callback=' + callback;
  document.body.appendChild(script);
}

jsonp('https://api.example.com/data', 'handleResponse');

总结一下：

CORS策略是浏览器的安全机制，限制跨域资源访问。
解决CORS问题有多种方案，包括修改服务器配置、使用WordPress插件、创建代理服务器等。
选择合适的方案取决于你的具体需求和环境。
在解决CORS问题的同时，要注意安全问题，避免暴露敏感信息。

希望今天的分享能够帮助你更好地理解和解决 WordPress 中的 CORS 问题。祝大家开发顺利！

WordPress 跨域 AJAX 调用：突破 CORS 策略的重重迷雾

发表回复 取消回复

发表回复取消回复