Почему я получаю сообщение об ошибке 502 и CORS при отправке запроса?

Question

Не уверен, почему я получаю ошибки 502 и CORS в консоли с моим кодом ниже.

Я пытаюсь реализовать запрос формы для размещения введенных пользователем электронных писем в моей базе данных SQL с помощью React. js и PHP. Но по какой-то причине я получаю вышеупомянутые ошибки.

Что я делаю не так и как я могу это исправить?

Я предполагаю, что это что-то делает для моего хоста URL неверно, но я могу ошибаться.

Ниже приведено изображение столбца БД, и моя ошибка

Вот emails.php:

<?php
$servername = "127.0.0.1";
$username   = "root";
$password   = "root";
$dbname     = "user";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}
$sql = "INSERT INTO userlist (emails)
        VALUES ('".$_POST['myEmail']."')";
if (mysqli_query($conn,$sql)) {
    $data = array("data" => "You Data added successfully");
    echo json_encode($data);
} else {
    echo "Error: " . $sql . "<br>" . $conn->error;
}

?>

Вот мой js файл:

export default class ProductList extends Component {
    constructor(props) {
        super(props);
        this.addFormData = this.addFormData.bind(this);
    }

    addFormData(evt) {
        evt.preventDefault();
        const fd = new FormData();
        fd.append('myEmail', this.refs.myEmail.value);
        var headers = {
            'Content-Type': 'application/json;charset=UTF-8',
            "Access-Control-Allow-Origin": "*"
        }
        axios.post("http://localhost/emails.php", fd, headers
        ).then(res=>
            {
                alert(res.data.data);
            }
        );

    }

    render() {
        return (      
            <form>
                <div className="form-group">
                    <input type="email" className="form-control" id="Email" aria-describedby="emailHelp" placeholder="Enter email" ref="myEmail" />
                </div>
                <button type="submit" className="btn btn-primary" onClick={this.addFormData}>Submit</button>
            </form>
        </div>
        );
    }
}

Вот ошибка, которую я получаю:

POST http://localhost/emails.php 502 (Bad Gateway)
Access to XMLHttpRequest at 'http://localhost/emails.php' from origin 
'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' 
header is present on the requested resource.
createError.js:17 Uncaught (in promise) Error: Network Error
at createError (createError.js:17)
at XMLHttpRequest.handleError (xhr.js:83)