主题中设置标题的多站点 Wordpress API CORS 问题（v5）

Posted 2023-02-19

【中文标题】主题中设置标题的多站点 Wordpress API CORS 问题（v5）

【英文标题】：multisite Wordpress API CORS issue with headers set in theme (v5)

【发布时间】：2019-07-20 07:17:50

【问题描述】：

我有一个调用 Wordpress v5 API 的 React 应用程序。

const api = `$WAPI`;
const headers = 
  'Content-Type': 'application/json'
 ;

fetch(api, 
  headers: headers
)
.then(function(data)
  console.log(data);
)
.then(this.handleposts)
.catch(err => console.log(err));

在我的开发工具控制台中返回此错误：

Access to fetch at 'http://XXX.XXX.XXX.XX/firstcivdivcareers/wp-json/wp/v2/posts/' from origin 'http://localhost:9000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.

我曾经调用单个 Wordpress 站点 API，但现在它不起作用。我假设 Wordpress API 可以与用作第三方服务的跨域域调用一起使用。

我对主题的functions.php 添加了更改。当我在浏览器中访问我的站点并检查开发工具控制台中的标题时。我可以看到我用正确的标题发送了我的回复。但是，当我通过 JS 的 fetch 调用调用时，它的工作方式不同。

添加到functions.php的更改：

/**
 * Only allow GET requests
 */
function add_cors_http_header()

   header("Access-Control-Allow-Origin: *");
   header("Access-Control-Allow-Methods: GET");
   header("Access-Control-Allow-Headers: origin");

【参考方案1】：

在提供 API 的 wordpress 代码中找到该文件。

您只需在该文件的开头添加：

 <? header("Access-Control-Allow-Origin: *"); ?> 

编辑：

而不是编辑核心文件，更好的选择是使用this线程中解释的过滤器。您可以将以下代码放入您的functions.php

add_filter('init', 'add_cors_header');
function add_cors_header() 
    header(...);

【讨论】：

那是我不知道的。它从哪里提供 API？它是 Wordpress 5。这允许所有域对吗？还是所有 HTTP 动词？我可以为GET 请求设置它吗？

【参考方案2】：

我的 Vue.js 代码也有这个问题。这是我添加到我的 GET 请求中的内容，我没有其他问题：https://cors-anywhere.herokuapp.com，它紧接在 URL 之前：

让 url = 'https://cors-anywhere.herokuapp.com/https://jobs.github.com/positions.json?&markdown=true&page=1';

希望对你有帮助！

【讨论】：

所以要路由到第二个服务？如果我拥有服务器，肯定有办法配置它。我不应该需要第二次服务。这不会减慢我在生产中的应用程序吗？

@KyleCalica-St 到目前为止我还没有遇到任何问题，但我还没有投入生产。似乎这是该小组的另一个问题——我不知道。

我最终不需要它。进行了全新安装，然后从单站点升级到多站点。我怀疑我的一些干预导致了这个问题。

【参考方案3】：

您可以使用此 MS Edge 插件快速禁用 Cors。

CORS Unblock - Microsoft Edge Addons

它会工作得很好：）