【发布时间】：2020-01-18 23:34:43
【问题描述】：
我正在使用 API 从 ReactJS 中使用 axios 发送数据我收到以下错误：
被 CORS 策略阻止：“Access-Control-Allow-Origin”
以下是错误：
从源“http://localhost:3000”访问“http://localhost/2019/eurdu/User_Controllers/UserRegisterController/userRegistration”处的 XMLHttpRequest 已被 CORS 策略阻止：预检响应中的 Access-Control-Allow-Headers 不允许请求标头字段 access-control-allow-origin . 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);
}
【问题讨论】：
标签： reactjs codeigniter axios