将 ReactJS 与 PHP 一起使用答案

【问题标题】：Using ReactJS with PHP将 ReactJS 与 PHP 一起使用
【发布时间】：2018-05-14 06:41:51
【问题描述】：

我寻求有关如何与 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，我在 ReactJS 中处理这个 PHP 文件。

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();

产品.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 查询中写什么。请帮帮我！谢谢

【问题讨论】：

您收到错误的请求的 URL 是什么？
我指的是 URL example.com/db.php 它在同一台服务器上。但在不同的目录中。我已经尝试在 package.json 中指定代理，将标头添加到 php。没有任何帮助！
请将此评论中的行添加：stackoverflow.com/a/25661403/933575 到 db.php，然后发回结果。

标签： php json reactjs axios

【解决方案1】：

您需要在 axios 中设置允许访问控制和传递标头的标头。您还需要在您的 php 服务器上启用 cors。

cors implementation in php 的示例。

【讨论】：