WordPress插件中AJAX请求list-manage接口被CORS策略拦截如何解决

该CORS报错本质是Mailchimp的公开订阅接口默认不允许第三方站点前端直接发起AJAX请求，属于Mailchimp官方的跨域访问限制。Codepen平台自带前端请求代理逻辑临时规避了跨域拦截，部署到自有WordPress站点后代理逻辑失效，就触发了浏览器原生CORS校验拦截。

方案1：原生表单+隐藏iframe提交（最低改造成本） #

Mailchimp官方默认提供的订阅表单本身就是基于原生表单提交，天然不存在跨域问题，配合隐藏iframe可以实现无刷新提交效果，完全不需要修改后端代码：

<!-- 新增隐藏iframe用来承接表单提交响应，避免页面跳转 -->
<iframe name="mailchimp_submit_frame" style="display: none;"></iframe>

<!-- 原有表单修改提交配置 -->
<form 
  action="https://vative.us15.list-manage.com/subscribe/post" 
  method="POST"
  target="mailchimp_submit_frame"
  class="optin-form"
>
  <!-- 原有表单字段、Mailchimp生成的b_开头隐藏校验字段保持不变 -->
  <button type="submit">提交订阅</button>
</form>

<script>
// 监听iframe加载完成事件，触发成功提示
document.querySelector('iframe[name="mailchimp_submit_frame"]').addEventListener('load', function() {
  $(".optin-form").hide();
  $(".optin-success").show();
})
</script>

方案2：WordPress后端代理转发（保留原有AJAX交互） #

浏览器CORS限制仅作用于前端请求，服务端发起的HTTP请求不存在跨域拦截。你可以在WordPress侧新增一个自定义代理接口，前端请求先发送到自有站点接口，再由后端转发到Mailchimp：

1. 首先在WordPress主题functions.php文件或者你的插件代码中新增自定义REST接口：

add_action('rest_api_init', function () {
  // 注册自定义订阅接口
  register_rest_route('custom_api/v1', '/mailchimp_subscribe', [
    'methods' => WP_REST_Server::CREATABLE,
    'callback' => 'forward_mailchimp_request',
    'permission_callback' => '__return_true',
  ]);
});

function forward_mailchimp_request(WP_REST_Request $req) {
  // 透传前端提交的所有参数
  $post_params = $req->get_params();
  // 后端发起请求到Mailchimp
  $mc_response = wp_remote_post('https://vative.us15.list-manage.com/subscribe/post', [
    'body' => $post_params,
    'timeout' => 15,
  ]);
  // 透传Mailchimp返回结果到前端
  return json_decode(wp_remote_retrieve_body($mc_response), true);
}

2. 修改前端AJAX请求地址为自有站点代理接口：

$.ajax({
  type: "post",
  // 替换为你的站点代理接口地址
  url: "/wp-json/custom_api/v1/mailchimp_subscribe",
  dataType: "json",
  data: data_val,
  success: function(data) {
    $(".optin-form").hide();
    $(".optin-success").show();
  },
  error: function(data){
    $(".optin-form").hide();
    $(".optin-success").show();
  }
});

• 两种方案都必须保留Mailchimp自动生成的name="b_<随机字符串>"格式的隐藏输入框，该字段是Mailchimp反机器人校验字段，缺失会导致订阅请求被拦截。
• 不要尝试通过修改请求头、前端代理插件等方式绕过CORS，浏览器同源策略是强制安全限制，前端层面没有稳定可落地的永久绕过方案。

内容的提问来源于stack exchange，提问作者EasyWay