Question

我有一个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");
}

Answer 1

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

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

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

编辑：

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

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

Answer 2

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

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

希望对您有帮助！

Answer 3

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

CORS Unblock - Microsoft Edge Addons

它会工作得很好:)

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

3 个答案: