Why am I getting a 502 and CORS error on a post request?

Question

Not sure why I'm getting a 502 and CORS errors in the console with my code below.

What I'm trying to do is implement a form request to place user entered emails into my SQL database with React.js and PHP. But for some reason, I'm getting the aforementioned errors.

What am I doing wrong and how can I rectify this?

I'm guessing it has something to do my host URL being incorrect but I could be wrong.

Below is an image of DB column and my error

Here's 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;
}

?>

Here's my js file:

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>
        );
    }
}

Here's error I'm getting:

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)

CORS ... because `http://localhost/emails.php` is port 80 which isn't port 3000 - therefore cross origin. Now, error 502: is a bad gateway response - so something isn't configured right on your server — Jaromanda X, Jan 19 '20 at 00:22
@JaromandaX would I have to use something like MAMP for what I'm trying to accomplish? I remember doing a tutorial I while back with php and react.js where MAMP wasn't used and I was able to successfully store use info into the DB — sp92, Jan 19 '20 at 00:30
no idea what MAMP is - but then, no idea how your server side is configured, so I can't honestly say what you need — Jaromanda X, Jan 19 '20 at 00:34
Does this answer your question? [How to Fix react cors error in localhost?](https://stackoverflow.com/questions/58679084/how-to-fix-react-cors-error-in-localhost) — Triby, Jan 19 '20 at 02:04
If you are using MAMP, I'm guessing that you are on mac? ...might want to put that in the question along with which web browser you're using as if you're using chrome they are throwing errors unless you set flags for CORS lately. — Mirv - Matt, Jan 19 '20 at 03:00

Why am I getting a 502 and CORS error on a post request?

0 Answers0