同服务器下Nuxt.js使用Axios调用WordPress API出现CORS错误如何解决

跨域错误触发的本质是wp.test.local与test.local属于不同源，浏览器同源策略默认拦截跨域请求，其他站点的WordPress接口可正常调用是因为对方服务端已经预先配置了允许跨域的响应头。以下是适配开发、生产环境的两种可行方案： #

方案1：WordPress侧配置CORS规则 #

你可以直接在WordPress侧添加允许Nuxt域名跨域访问的响应头，有两种配置方式可选：

方式1：修改主题functions.php文件 #

在WordPress当前使用主题的根目录下找到functions.php，添加以下代码：

add_action('rest_api_init', function () {
    // 填写允许跨域的源，分别对应开发、生产环境的Nuxt域名
    $allowed_origins = [
        'http://test.local',
        'https://你的生产Nuxt主域名.com'
    ];
    if (isset($_SERVER['HTTP_ORIGIN']) && in_array($_SERVER['HTTP_ORIGIN'], $allowed_origins)) {
        header("Access-Control-Allow-Origin: " . $_SERVER['HTTP_ORIGIN']);
        header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE");
        header("Access-Control-Allow-Credentials: true");
        header("Access-Control-Allow-Headers: Authorization, Content-Type, X-Requested-With");
    }
    // 直接返回OPTIONS预检请求
    if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
        status_header(200);
        exit();
    }
});

方式2：修改Apache配置 #

也可以在WordPress对应的虚拟主机配置文件，或者站点根目录的.htaccess文件中添加以下规则：

<IfModule mod_headers.c>
    SetEnvIf Origin "^http(s)?://(test\.local|你的生产Nuxt主域名\.com)$" AccessControlAllowOrigin=$0
    Header add Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin
    Header always set Access-Control-Allow-Methods: "GET, POST, OPTIONS, PUT, DELETE"
    Header always set Access-Control-Allow-Headers: "Authorization, Content-Type, X-Requested-With"
    Header always set Access-Control-Allow-Credentials: true

    RewriteEngine On
    RewriteCond %{REQUEST_METHOD} OPTIONS
    RewriteRule ^(.*)$ $1 [R=200,L]
</IfModule>

注意：修改完Apache配置后需要重启服务生效 #

方案2：Nuxt侧配置代理（更推荐） #

该方案无需修改WordPress配置，通过代理转发请求从根源避免跨域问题，同时适配开发、生产环境。

开发环境配置（以Nuxt3为例，Nuxt2逻辑一致） #

在nuxt.config.ts中添加代理规则：

export default defineNuxtConfig({
  nitro: {
    devProxy: {
      "/wp-api": {
        target: "http://wp.test.local/wp-json", // 开发环境WordPress API根地址
        changeOrigin: true,
        prependPath: false,
      }
    }
  },
})

配置完成后，原本请求http://wp.test.local/wp-json/wp/v2/posts的Axios请求，改为请求/wp-api/wp/v2/posts即可，不会触发跨域。

生产环境配置 #

在Nuxt对应的主域名Apache虚拟主机配置中添加反向代理规则，将/wp-api前缀的请求转发到WordPress子域名：

# 需先开启Apache的proxy、proxy_http模块
ProxyPass /wp-api http://你的WordPress子域名/wp-json
ProxyPassReverse /wp-api http://你的WordPress子域名/wp-json

验证方法 #

配置完成后可以通过curl命令校验CORS头是否生效：

curl -I -H "Origin: http://test.local" http://wp.test.local/wp-json/wp/v2/posts

如果返回结果中包含Access-Control-Allow-Origin: http://test.local则说明配置正常。 #

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