时间戳

首页 > 解决方案 > 从 php 页面获取数据并将其显示在 react js 视图中

php - 从 php 页面获取数据并将其显示在 react js 视图中

问题描述

我有一个反应 js Web 应用程序。我想从服务器获取数据，我收到如下错误：

Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0

从源“ http://192.168.8.110:3000 ”访问“ http://192.168.8.110/data.php ”中的 XMLHttpRequest已被 CORS 策略阻止：不存在“Access-Control-Allow-Origin”标头在请求的资源上。

我已经使用 npm 和 create-react-app 构建了我的反应应用程序。

PHP文件路径是：

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

我正在获取数据的 js 文件是：

/usr/local/www/basic/reactproject/src/routes/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;

标签： phpajaxreactjsapi

解决方案

CORS 用于访问不同域上的 Web 资源。为了将您的 Web 应用程序连接到服务器，您需要取消阻止“ACCESS-CONTROL-ALLOW-ORIGIN”。您可以通过向 chrome 浏览器添加扩展来实现此目的。链接如下。

https://chrome.google.com/webstore/detail/cors-unblock/lfhmikememgdcahcdlaciloancbhjino

或者

https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf

推荐阅读