Question

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

受CORS政策的限制：“访问控制允许来源”

以下是错误：

CORS策略已阻止从来源“ http://localhost/2019/eurdu/User_Controllers/UserRegisterController/userRegistration”访问“ http://localhost:3000”处的XMLHttpRequest：Access-Control-Allow-不允许请求标头字段access-control-allow-origin标头在飞行前响应。 const API_PATH_Signup ='http://localhost/2019/eurdu/User_Controllers/UserRegisterController/userRegistration';

下面是SignUp组件：

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

Answer 1

如果您在本地主机header('Access-Control-Allow-Origin: *');中创建应用程序，则无法正常工作。在浏览器中安装CORS Everywhere plugin，然后检查响应是否正常。...

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

被CORS政策封锁：“访问控制允许来源”

1 个答案: