извлечение данных со страницы php и отображение их в представлении реагирования

Question

У меня есть веб-приложение реагировать. Я хочу получить данные с сервера и получаю сообщения об ошибках типа:

Uncaught (в обещании) SyntaxError: Неожиданный токен <в JSON в позиции 0 </p>

Доступ к XMLHttpRequest at 'http://192.168.8.110/data.php' от источника 'http://192.168.8.110:3000' заблокировано политикой CORS: в запрошенном ресурсе отсутствует заголовок' Access-Control-Allow-Origin '.

IЯ скомпилировал мое приложение реакции с помощью npm и create-Reaction-app.

Путь к файлу PHP:

/ usr / local / www / basic /actproject / data.php

и файл js, из которого я извлекаю данные:

/ usr / local / www / basic / Reactionproject / src / routs / dashboard.js

вот код PHP:

<?php
echo'{"page":1,"per_page":6,"total":12,"total_pages":2,"data":[{"id":1,"email":"george.bluth@reqres.in","first_name":"George","last_name":"Bluth","avatar":"https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/128.jpg"},{"id":2,"email":"janet.weaver@reqres.in","first_name":"Janet","last_name":"Weaver","avatar":"https://s3.amazonaws.com/uifaces/faces/twitter/josephstein/128.jpg"},{"id":3,"email":"emma.wong@reqres.in","first_name":"Emma","last_name":"Wong","avatar":"https://s3.amazonaws.com/uifaces/faces/twitter/olegpogodaev/128.jpg"},{"id":4,"email":"eve.holt@reqres.in","first_name":"Eve","last_name":"Holt","avatar":"https://s3.amazonaws.com/uifaces/faces/twitter/marcoramires/128.jpg"},{"id":5,"email":"charles.morris@reqres.in","first_name":"Charles","last_name":"Morris","avatar":"https://s3.amazonaws.com/uifaces/faces/twitter/stephenmoon/128.jpg"},{"id":6,"email":"tracey.ramos@reqres.in","first_name":"Tracey","last_name":"Ramos","avatar":"https://s3.amazonaws.com/uifaces/faces/twitter/bigmancho/128.jpg"}]}'
?>

и это dashboard.js:

import React from 'react';

class Dashboard extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      hits: []
    };
  }
  componentDidMount() {
    fetch("../data.php")
    .then(response => response.json())
    .then(data => 
      this.setState({ hits: data.data},
        this.props.removeLoading()
      )
    )
  }

  render() {
    const { hits } = this.state;  
    console.log(hits)
    return (
      <ul>
        {hits.map(hit =>
          <li key={hit.id}>
            <span>{hit.email}</span>
            <img src={hit.avatar} alt="images"/>
          </li>
        )}
      </ul>
    );
  }
}
export default Dashboard;