Использование ReactJS с PHP

Question

Прошу помощи по взаимодействию с ReactJS и PHP.

У меня есть php-файл для связи с базой данных и получения данных из базы данных в формате JSON.

---

db.php

require($_SERVER['DOCUMENT_ROOT'] . '/wp-blog-header.php');

global $post;

$args = array(
   'numberposts' => '10',
   'offset' => '27',
   'post_type' => 'product',
   'post_status' => 'publish',
   'orderby' => 'menu_order',
   'order' => 'ASC'
);

$products = get_posts($args);

foreach ( $products as $product ) {
   $result = $products;
}

echo json_encode($result);

Все хорошо, и я получаю это в формате JSON.

Используя axios, я обрабатываю этот PHP-файл в ReactJS.

---

index.js

import React from 'react';
import ReactDOM from 'react-dom';

import registerServiceWorker from './registerServiceWorker';
import axios from "axios";


import Product from "./Product";


componentWillMount() {

axios.get('db.php')
.then(({ data }) => {
     this.setState({
         result: data
         });
     });
}

render() {
    return(
        <div className="products">
            {this.state.result.map((product, i) => (
                <Product
                    key={i}
                    title={product.post_title}
                    guid={product.post_guid}
                />
            ))}
        </div>
    );
}

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

---

Product.js

import React from 'react';

const Product = ({post_title, guid}) => (
    <div>
        <div>{post_title}</div>
        <div>{guid}</div>
    </div>
);

export default Product;

---

Мой код JSON

[  
   {  
      "ID":3431,
 "post_title":"\u041a\u041e\u041d\u0426\u0415\u041d\u0422\u0420\u0410\u0422\u041e\u0420 8\u0424-1\/2",
      "guid":"http:\/\/domain.ru\/product\/koncentrator-8f-1-buk\/",
   },
]

И я получаю ошибку в ReactJS Запрошенный ресурс не имеет заголовка «Access-Control-Allow-Origin».

В файле hosts уже зарегистрирован 127.0.0.1 localhost domain.com Но все равно ошибка.

Как мне решить эту проблему или что написать в запросе axios. Помоги мне, пожалуйста! Спасибо

Answer 1

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

Пример реализации cors в php .