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

Posted 2023-02-22

【中文标题】从 php 页面获取数据并将其显示在 react js 视图中

【英文标题】：fetching data from a php page and show it in the react js view

【发布时间】：2020-02-13 05:21:14

【问题描述】：

我有一个 react js web 应用程序。我想从服务器获取数据，但出现如下错误：

Uncaught (in promise) SyntaxError: Unexpected token

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

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

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":"[e-mail]","first_name":"George","last_name":"Bluth","avatar":"https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/128.jpg","id":2,"email":"[e-mail]","first_name":"Janet","last_name":"Weaver","avatar":"https://s3.amazonaws.com/uifaces/faces/twitter/josephstein/128.jpg","id":3,"email":"[e-mail]","first_name":"Emma","last_name":"Wong","avatar":"https://s3.amazonaws.com/uifaces/faces/twitter/olegpogodaev/128.jpg","id":4,"email":"[e-mail]","first_name":"Eve","last_name":"Holt","avatar":"https://s3.amazonaws.com/uifaces/faces/twitter/marcoramires/128.jpg","id":5,"email":"[e-mail]","first_name":"Charles","last_name":"Morris","avatar":"https://s3.amazonaws.com/uifaces/faces/twitter/stephenmoon/128.jpg","id":6,"email":"[e-mail]","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 />
          </li>
        )
      </ul>
    );
  

export default Dashboard;

【问题讨论】：

我猜你用 PHP 返回的 JSON 的内容类型不正确。尝试设置一个标头，并返回一个 JSON 作为字符串尝试 json_encode 一个数组，这样你就可以确保你的 JSON 是有效的。

@techouse 感谢您的评论。我已经通过相同的结果尝试了一个 API，它工作正常。但它不是这样工作的！

然后尝试将 header('Content-Type: application/json; charset=utf-8'); 添加到 PHP 并正确返回 JSON。

@techouse 仍然无法正常工作。我试过的 API 是这样的：reqres.in/api/users?delay=3

你为什么不直接使用.json文件而不是通过php回显？

【参考方案1】：

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

【讨论】：

这不是每个最终用户都不会安装此插件解决方案的正确方法，只能在服务器端应用 CORS