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

Posted 2023-02-22

【中文标题】被 CORS 策略阻止：“Access-Control-Allow-Origin”

【英文标题】：Blocked by CORS policy: The 'Access-Control-Allow-Origin'

【发布时间】：2020-01-18 23:34:43

【问题描述】：

我正在使用 API 从 ReactJS 中使用 axios 发送数据我收到以下错误：

以下是错误：

从源“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"
                    />
                <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);
    

【参考方案1】：

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

插件网址：

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