首页 > 解决方案 > 将 ReactJS 与 PHP 一起使用

问题描述

我寻求有关如何与 ReactJS 和 PHP 交互的帮助。

我有一个 php 文件来与数据库通信并以 JSON 格式从数据库中获取数据。


数据库.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 查询中写什么。请帮帮我!谢谢

标签: phpjsonreactjsaxios

解决方案


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

php 中的 cors 实现示例。


推荐阅读