用 PHP Rest API 反应 axios，如何编写 baseurl [重复]

Posted 2023-02-22

【中文标题】用 PHP Rest API 反应 axios，如何编写 baseurl [重复]

【英文标题】：React axios with PHP Rest API , how to write the baseurl [duplicate]

【发布时间】：2021-02-05 10:09:32

【问题描述】：

我正在做一个 ReactJS 前端应用程序并从使用 php Rest API 创建的 API 获取数据，但我的反应是托管在 localhost:3000 上，但我的 php 文件托管在 localhost:80 上。所以不知道如何在反应中编写baseurl，因为直到现在它总是出现一些错误。 我可以知道如何解决吗？谢谢。

错误：

Access to XMLHttpRequest at 'http://localhost/reacttest/src/api/read.php' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

xhr.js:184 GET http://localhost/reacttest/src/api/read.php net::ERR_FAILED

ReactJS：

import React from 'react';
// import logo from './logo.svg';
import './App.css';
import axios from "axios";

const baseUrl = "http://localhost:80/reacttest/src/api";

const sampleGet = async () => 
  const result = await axios.get(baseUrl + "/read.php");
  console.log(result);
;
const samplePost = async () => 
  const result = await axios.post(baseUrl + "/posts", 
    sampleData: "nabezap"
  );
  console.log(result);
;
const sampleDelete = async () => 
  const result = await axios.delete(baseUrl + "/posts/4");
  console.log(result);
;


function App() 
  return (
    <div className="App">
      <button onClick=sampleGet>GET</button>
      <button onClick=samplePost>POST</button>
      <button onClick=sampleDelete>DELETE</button>
    </div>
  );


export default App;

read.php:

<?php

header('Content-Type: application/json;charset=utf-8');// all echo statements are json_encode

include('se.php');
include('db.php');
session_start();

$doctordb = new doctorModel; //instantiate database to start using 

$result = $doctordb->showDoctorinfo();
if($result == false) 
    http_response_code(204); // no content
 elseif(is_array($result)) 
    http_response_code(200); //success
    echo json_encode($result);
 
?>

api.php：

【问题讨论】：

您需要在您的 API 目录根目录下的 htaccess 文件中添加一个设置。见this solution

【参考方案1】：

基本 url 是正确的（默认为 80），如果您在开发工具中检查您的网络选项卡，您会看到请求确​​实发出并收到了预期的响应。

问题在于您的 REST API。线索在错误中：

No 'Access-Control-Allow-Origin' header is present on the requested resource.

这意味着服务器接收到请求，对其进行处理并返回响应——但它没有附加 Access-Control-Allow-Origin: ‘http://localhost:3000’ 标头。当您的浏览器收到来自 API 的响应时，它会检查此标头并拒绝 javascript 访问响应数据，如果它丢失。这是正常的。

在您的 REST API 上设置 CORS 是可行的方法。您正在使用什么框架（如果有）？一旦我知道了，我会用更多信息编辑这个答案。

【讨论】：

谢谢 Nick，因为这是我学习 ReactJS 的第一天，只是测试如何使用 axios 获取/发布数据。所以我没有在前端使用任何框架，而在后端使用了 PHP REST API。我在上面添加了我的代码。

你用什么做后端？你能分享一些来自你的 REST API 的代码吗？

嗨尼克，我已经编辑了我的问题，PHP 代码是我的后端代码，文件名是 api.php（此文件中的所有 api，例如，如果我使用纯 javascript 获取数据，我会这样写：var url = './api/api.php?action=read';)。该文件包括我的 db.php（db 连接和查询）和 session.php。为了测试 reactJS，我添加了一个名为 read.php 的新文件，代码如上所示。

尝试将 header("Access-Control-Allow-Origin: 'http://localhost:3000'"); 添加到您的 api.php 中，就在您的其他标头声明下方。

谢谢尼克，我按照你的回答解决了问题。只需在 api 文件的开头添加这一行就可以了： header("Access-Control-Allow-Origin: *");再次感谢您。