I am developing an CakePHP app that the Models for my ReactJS application, but I have run into a problem using Axios to retrieve a dynamically created json from one of the endpoints in the CakePHP application.
The action in the controller looks like this:
public function bootstrap($name = null){
$this->autoRender = false;
$config = $this->Themes->getJson($name);
$config += $this->systemVars();
$output = json_encode($config);
$this->response
->withHeader('Access-Control-Allow-Origin','*')
->withHeader('Access-Control-Allow-Methods',['GET', 'POST'])
->withHeader('Access-Control-Max-Age','8600')
->withType('application/json')
->withStringBody($output);
return $this->response;
}
and the axios request in my React app looks like this:
axios.get('https://demo.axistaylor.com/ccsllc/themes/json')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
Everything seems to work fine except this the response that is printed to the console when I run the react app.
{
config: {adapter: ƒ, transformRequest: {…}, transformResponse: {…},
timeout: 0, xsrfCookieName: "XSRF-TOKEN", …},
data:"",
headers:{pragma: "no-cache", content-type: "text/html; charset=UTF-8",
cache-control: "no-store, no-cache, must-revalidate", expires: "Thu, 19 Nov 1981 08:52:00 GMT"},
request: XMLHttpRequest {onreadystatechange: ƒ, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …},
status: 200,
statusText: "OK",
…
}
The data comeback as an empty string "". I have tried changing the method of setting the body and headers, even reverting to the methods supported by prior versions of CakePHP, eg. $this->response->header(…)->body(…)
, and the results are the same. The endpoint listed in the axios request is public so you can test it yourself. https://demo.axistaylor.com/ccsllc/themes/json