被CORS策略阻止：“访问-控制-允许-起源”

Question

我使用Axios从使用API的ReactJS发送数据，我得到一个错误：

以下是错误：

CORS策略已阻止从来源“http://localhost/2019/EURDU/user_controllers/userregistercontroller/userregistration”访问位于“http://localhost:3000”的XMLHttpRequest：飞行前响应中的access-control-allog-headers不允许请求头字段access-control-allogin。const API_PATH_Signup='http://localhost/2019/eurdu/user_controllers/userregistercontroller/userregistration‘；

下面是注册组件：

class SignUp extends Component{
    constructor(props){
        super(props);
        this.state = {user_name:"",user_email:"",user_mobile:"",user_password:""}
    }


handleFormSubmitSignup = e => {
  e.preventDefault();
  console.log(this.state);
  axios({
    method: 'post',
    url: `${API_PATH_Signup}`,
    headers: { 'content-type': 'application/json' ,
      "access-control-allow-origin" : "*"
        },
    data: this.state
  })
    .then(result => {
        console.log(result);
      this.setState({
        mailSent: result.data.sent
      })

    })

    .catch(error => this.setState({ error: error.message }));
};

<div className="col-sm-6 col-md-4 col-md-offset-4">
            <h1 className="text-center login-title">Sign Up to EUrdu</h1>
            <div className="account-wall">
                <img className="profile-img" src="https://lh5.googleusercontent.com/-b0-k99FZlyE/AAAAAAAAAAI/AAAAAAAAAAA/eu7opA4byxI/photo.jpg?sz=120"
                    alt="progimg"/>
                <form id="myform">
                <input type="text" className="form-control" placeholder="FirstName" name="user_name" id="user_name"
                    value={this.state.user_name}
                    onChange={e => this.setState({ user_name: e.target.value })}
                /><br/>
                <input type="text" className="form-control" placeholder="Email Id" id="user_email" name="user_email"
                    value={this.state.user_email}
                    onChange={e => this.setState({ user_email: e.target.value })}
                /><br/>
                <input type="text" className="form-control" placeholder="Phone Number" name="user_mobile" id="user_mobile"
                    value={this.state.user_mobile}
                    onChange={e => this.setState({ user_mobile: e.target.value })}
                /><br/>
                <input type="password" className="form-control" placeholder="Password" id="user_password" name="user_password"
                    value={this.state.user_password}
                    onChange={e => this.setState({ user_password: e.target.value })}
                /><br/>
                <button className="btn btn-lg btn-primary btn-block" type="submit"
                onClick={e => this.handleFormSubmitSignup(e)} >
                    Sign in</button>
                </form>
                <span style={{textalign:'center'}}>Have an account?</span>
            </div>
        </div>

标头('access-control-allog-origin:*')；

下面是用户注册函数：

function userRegistration()

    {

    header('Access-Control-Allow-Origin: *');
         $name= $this->input->post('user_name');
        $email= $this->input->post('user_email');
        $phonenumber= $this->input->post('user_mobile');
        $password= $this->input->post('user_password');
        $data= array('user_name' => $name ,
                     'user_email' => $email ,
                     'user_mobile' => $phonenumber , 
                     'user_password' => $password ,
        );
       print_r($data);
       exit();
      $this->load->model('User/UserRegisterModel','userregistermodel');
      $res= $this->userregistermodel->userRegistration($data);
      $formData = array();
      if($res){
        $formData = array('status' => "true",'message'=>'successfully created' );
      }else{
        $formData = array('status' => "false",'message'=>'Please try again' );
      }
      echo json_encode($formData);
    }

Answer 1

如果在localhost标头('access-control-allog-origin:*')中创建应用程序；不起作用。在浏览器中安装CORS Everywhere插件，然后检查响应，它工作正常······

插件URL：

For Firefox : https://addons.mozilla.org/en-US/firefox/addon/cors-everywhere/
For Chrome : https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf?hl=en