在主题(v5)中设置标题的多站点WordPress API CORS问题

我有一个React应用程序, 它调用了Wordpress v5 API。

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: *"); ?> 

编辑：

代替编辑核心文件, 更好的选择是使用此线程中说明的过滤器。你可以将以下代码放入你的functions.php中

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

#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′;

希望对你有所帮助！