URL 在我尝试从 Bluehost 获取数据以响应网站应用程序时被阻止(Access-Control-Allow-Origin - 缺少 Header)

URL blocked ( Access-Control-Allow-Origin - Missing Header) while I am trying to get the data from Bluehost to react website app

我正在使用(对网站做出反应)创建一个网站,我想使用 php 作为后端从我在 blueHost 中的服务器获取数据并做出反应(JavaScript)作为 front-end

我有一个问题,我无法加载我的 file.php 的数据案例,因为 Access control allow Origin

而被阻止

知道如何解决这个问题吗?

这是我的代码app.js(反应)

    const getData = async () => {
    fetch(URL,{
      mode:'cors',
      headers : {
        'Content-Type' : 'application/x-www-form-urlencoded; charset=UTF-8',
  'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Origin': 'http://localhost:3004',
    'Access-Control-Allow-Methods': 'GET',
    'Content-type': 'application/json; charset=UTF-8',
    'Access-Control-Allow-Headers':'Origin, X-Requested-With, Content-Type, Accept',
    'Access-Control-Request-Headers': 'x-token'
    }
    })
    .then((response) => response.json())
    .then((json) => console.log(json.flags))
    .catch((error) => console.log(error))
    .finally(() => console.log(false));

}

这是我的 file.php

 <?php
include 'DBConfig.php';
 
$conn = new mysqli($HostName, $HostUser, $HostPass, $DatabaseName);
header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE");
header("Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers, X-Requested-With");

$json = file_get_contents('php://input');
$obj = json_decode($json, true);

if ($conn->connect_error) {
 
 die("Connection failed: " . $conn->connect_error);
}
 
$sql = "SELECT * FROM `Transactions`";
 
$result = $conn->query($sql);
 
if ($result->num_rows >0) {
 
 
 while($row[] = $result->fetch_assoc()) {
 
 $tem = $row;
 
 $json = json_encode($tem);
 
 
 }
} else {
    $json = json_encode("false");

}
 echo $json;
$conn->close();
?>

知道如何解决这个问题吗?

这个错误是因为 运行 代码在本地。为了解决这个问题。您应该在 google chrome 中添加此扩展名。 (允许 CORS:Access-Control-Allow-Origin)然后打开和关闭。然后再次打开并测试您的代码。