Sunday, 9 April 2017

axios throws error for local apache-php reques

I am building a react site using webpack's built in development server. I am running the development server using webpack-dev-server --content-base src --inline --hot. It deploys on localhost:8080. I am also running an Apache server with php and mySQL at localhost:80. I am making a request to the Apache server using axios here is the script.

import dispatcher from "../dispatcher";
import axios from "axios";
let handlersURL = "http://localhost:80/missionariesvote/phpscripts/"
export function sendUserInfo(name, email, phone) {
  axios.post(handlersURL + "senduserinfo.php",
    {
      name,
      email,
      phone
    })
    .then((response) => {
      dispatcher.dispatch({type: "FETCH_TWEETS_FULFILLED", payload: response.data})
    })
    .catch((err) => {
      dispatcher.dispatch({type: "FETCH_TWEETS_REJECTED", payload: err})
    })
}

The senduserinfo.php script

<?php
   header('Access-Control-Allow-Origin: *');  
    $name = filter_input(INPUT_POST, 'name');
    $phoneNumber = filter_input(INPUT_POST, 'phone');
    $email = filter_input(INPUT_POST, 'email');
    if (
            !empty($name) &&
            !empty($phoneNumber) &&
            !empty($email) &&
            filter_var($email, FILTER_VALIDATE_EMAIL)
    ) {
        require_once './conectvars.php';
        $userIdSQL = "SELECT iduserinfo FROM userinfo WHERE `name` = ?";
        $userIdStmt = $link->prepare($userIdSQL);
        $userIdStmt->bind_param("s", $name);
        $userIdStmt->execute();
        $userIdStmt->bind_result($idUser);
        $userIdStmt->fetch();
        $userIdStmt->close();
        if(empty($idUser)){
          $addUserSQL = "INSERT INTO iduserinfo (`name`,`phonenumber`, `email`)
           VALUES (?, ?, ?)";
          $addUserStmt = $link->prepare($addUserSQL);
          $addUserStmt->bind_param("sss", $name,$phoneNumber, $email);
          $addUserStmt->execute();
          $addUserStmt->close();

          $userIdSQL = "SELECT iduserinfo FROM userinfo WHERE `name` = ?";
          $userIdStmt = $link->prepare($userIdSQL);
          $userIdStmt->bind_param("s", $name);
          $userIdStmt->execute();
          $userIdStmt->bind_result($idUser);
          $userIdStmt->fetch();
          $userIdStmt->close();
        }
        $votesUserIdSQL = "SELECT iduser FROM votes WHERE `iduser` = ?";
        $votesUserIdStmt = $link->prepare($votesUserIdSQL);
        $votesUserIdStmt->bind_param("s", $idUser);
        $votesUserIdStmt->execute();
        $votesUserIdStmt->bind_result($voteUserId);
        $votesUserIdStmt->fetch();
        $votesUserIdStmt->close();
        if($voteUserId){
          echo'1';
        }
      }
      else{
        echo'1';
      }
    $link->close();
  }

I get this error in the command prompt

        XMLHttpRequest cannot load http://localhost/missionariesvote/phpscripts/senduserinfo.php. Response to 
    preflight request doesn't pass access control check:
 No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access

.

I'm stumped. the github project is here https://github.com/theRealFakeRock/missionariesVote you can run the dev server by running npm run dev from the root folder. Thanks



via Orrin Naylor

No comments:

Post a Comment