axios 为本地 apache-php 请求抛出错误

Question

我正在使用 webpack 的内置开发服务器构建一个 React 站点。我正在运行使用 webpack-dev-server --content-base src --inline --hot 连接开发服务器。它部署在 localhost:8080。我也在运行与 php 和 mySQL 在 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 您可以通过运行ning 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;
}

axios 为本地 apache-php 请求抛出错误

axios throws error for local apache-php reques

apache

node.js

reactjs

webpack

axios