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

Question

我正在做一个 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：

Answer 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 是可行的方法。您正在使用什么框架（如果有）？一旦我知道了，我会用更多信息编辑这个答案。