在主题(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: *"); ?>

编辑:
【在主题(v5)中设置标题的多站点WordPress API CORS问题】代替编辑核心文件, 更好的选择是使用此线程中说明的过滤器。你可以将以下代码放入你的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′ ;
希望对你有所帮助!

    推荐阅读