WordPress API开发中Ionic调用遇多值CORS跨域错误求助

我明白你现在的困扰——浏览器直接调用API能正常返回数据，但在Ionic应用里就碰CORS报错，关键是提示The 'Access-Control-Allow-Origin' header contains multiple values '*，*'，这说明问题不是没开跨域，而是你的WordPress站点返回了重复的跨域响应头，这才是浏览器报错的根源。下面一步步给你解决：

1. 排查重复设置的来源 #

首先得找到哪里重复加了CORS头：

• 检查WordPress插件：看看是不是装了多个处理CORS的插件（比如WP CORS、Enable CORS等），多个插件同时生效就会重复添加Access-Control-Allow-Origin: *，把多余的插件禁用掉，只保留一个。
• 检查主题自定义代码：打开当前主题的functions.php，看看有没有手动添加的CORS代码，比如多次调用header('Access-Control-Allow-Origin: *')，这种重复代码要删掉或合并。

2. 用统一的方式设置CORS（推荐） #

如果之前的设置混乱，建议用WordPress REST API的钩子来统一配置，避免重复。在主题的functions.php里添加这段代码：

add_action('rest_api_init', function () {
    // 先移除默认的CORS头设置，防止冲突
    remove_filter('rest_pre_serve_request', 'rest_send_cors_headers');
    // 手动添加标准的CORS响应头
    add_filter('rest_pre_serve_request', function ($value) {
        header('Access-Control-Allow-Origin: *');
        header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS');
        header('Access-Control-Allow-Headers: Content-Type');
        return $value;
    });
}, 15);

这段代码会先清除默认的CORS配置，再统一添加合规的响应头，从根源避免重复。

3. 检查服务器层面的配置 #

如果上面的操作后还是有问题，就要看看服务器（Apache/Nginx）是不是也设置了CORS：

• Apache服务器：打开站点根目录的.htaccess文件，看看有没有类似这样的规则：

  Header set Access-Control-Allow-Origin "*"
  

  如果有，而且WordPress已经通过插件或代码设置了CORS，就把这段删掉，避免重复。
• Nginx服务器：检查站点的Nginx配置文件（比如站点专属的.conf文件），看看有没有：

  add_header Access-Control-Allow-Origin *;
  

  同样，重复的话要移除其中一处。

4. 验证修复结果 #

修改完成后，用curl命令测试一下响应头是否正常：

curl -I https://laundrylocker-eg.com/wp-json/wp/v2/delivery-locations

查看返回的响应头里，Access-Control-Allow-Origin应该只有一个*，没有重复。这时候再去Ionic应用里调用接口，应该就能正常获取数据了。

补充一句：之前你尝试的禁用Chrome CORS、用插件允许跨域没用，是因为浏览器检测到响应头有不合法的重复值，这种情况即使绕开CORS检查，浏览器的安全机制还是会拦截请求，所以解决重复头才是关键。

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