axios为本地apache-php请求引发错误。

Question

我正在构建一个反应网站使用webpack的内置开发服务器。我正在使用webpack-dev-server --content-base src --inline --hot运行开发服务器。它部署在localhost:8080上。我还在localhost:80上运行带有php和localhost:80的Apache服务器。我正在使用axios向Apache服务器发出请求，这里是脚本。

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

senduserinfo.php脚本

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

我在命令提示符中得到这个错误。

        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

。

我很困惑。github项目在这里，您可以通过从根文件夹运行https://github.com/theRealFakeRock/missionariesVote来运行npm run dev服务器。谢谢

Answer 1

在senduserinfo.php第一行中添加下面的代码。

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, OPTIONS, DELETE, PUT');
header('Access-Control-Allow-Headers: Host, Connection, Accept, Authorization, Content-Type, X-Requested-With, User-Agent, Referer, Methods');
if($_SERVER["REQUEST_METHOD"]== "OPTIONS"){
    echo "";die;
}