reactjs - 被 CORS 策略阻止：“Access-Control-Allow-Origin”

问题描述

我正在axios使用 API 从 ReactJS 发送数据，但出现以下错误：

被 CORS 策略阻止：“Access-Control-Allow-Origin”

以下是错误：

从源“ http://localhost:3000 ”访问“ http://localhost/2019/eurdu/User_Controllers/UserRegisterController/userRegistration ”处的 XMLHttpRequest已被 CORS 策略阻止：请求标头字段 access-control-allow-origin 为Access-Control-Allow-Headers 在预检响应中不允许。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 }));
};

下面是 JSX：

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

下面是 API 我也在标题中包含了这一行：

header('Access-Control-Allow-Origin: *');

下面是UserRegistration函数：

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

标签： reactjscodeigniteraxios

reactjs - 被 CORS 策略阻止：“Access-Control-Allow-Origin”

问题描述

解决方案

推荐阅读