Многоадресная Wordpress API CORS проблема с заголовками, установленными в теме (v5)

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.

Раньше я вызывал один API-сайт сайта Wordpress, но теперь это не так.т работа.Я предполагал, что Wordpress API будет работать с вызовами доменов из разных источников, которые будут использоваться в качестве сторонней службы.

Я добавил изменения в тему functions.php.Когда я захожу на свой сайт в браузере и проверяю заголовки в консоли разработчика.Я вижу, я отправил свой ответ с соответствующими заголовками.Однако, это не работает, когда я звоню через вызов выборки моего JS.

Изменения добавлены к 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

У меня тоже была эта проблема с моим кодом 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 2

Найдите файл в вашем WordPress-коде, который обслуживает API.

Вам просто нужно добавить в начале этого файла:

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

Редактировать:

Вместо того, чтобы редактировать основные файлы, лучше использовать фильтр, как описано в этом потоке.Вы можете поместить следующий код в ваш functions.php

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