Angular9 http сообщение CORS проблема - PullRequest
Новая
       7

Angular9 http сообщение CORS проблема

0 голосов
/ 05 мая 2020

Я новичок в Angular9, я попытался сохранить данные, вызвав php API из моего приложения angular9, но получил следующую ошибку. Я протестировал эту услугу у почтальона, которая работает нормально и успешно сохраняет данные 

Access to XMLHttpRequest at 'http://127.0.0.1/angularCRUDservices/user/saveEmployee' from origin 'http://localhost:4200' has been blocked by CORS policy: Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response.

**Please Note:** get method is working fine to fetch data,

моя Angular услуга: 

 reqHeader = new HttpHeaders(
        { 
            'Content-Type': 'application/json',
            'No-Auth':'True',
            'Access-Control-Allow-Origin' : '*',
            'Access-Control-Allow-Header':'Access-Control-Allow-Origin,X-Requested-With,Content-Type,Access',
            'Access-Control-Allow-Methods':'GET,POST,DELETE,PATCH,PUT,OPTIONS'
         }
         );

    constructor(private httpClient:HttpClient){}
    saveEmployee(formData:Employee){
        console.log(formData);
      this.httpClient.post<{response:any,success:boolean}>("http://127.0.0.1/angularCRUDservices/user/saveEmployee",formData,{
        headers : this.reqHeader
      })
      .subscribe((response)=>{
          console.log(response);
      })
    }

php код услуги:

установка заголовков в конструкторе: 

    public function __construct()
     {
            parent::__construct();
            $this->load->helper('url');
            $this->load->model('user_model','usr');

            header('Access-Control-Allow-Origin: *');
            header('Access-Control-Allow-Header: Access-Control-Allow-Origin,X-Requested-With,Content-Type,Access');
            header("Access-Control-Allow-Methods: GET,POST,DELETE,PATCH,PUT,OPTIONS");
            header('Content-Type: application/json, charset=utf-8');

     }

service: 

 public function saveEmployee()
     {

        $input = array();
        try
        {
            $UserID = $this->input->post('id');
            $input['name'] = $this->input->post('name');
            $input['gender'] = $this->input->post('gender');
            $input['email'] = $this->input->post('email');
            $input['mobile'] = $this->input->post('mobile');
            $input['department'] = 'test';//$this->input->post('department');
            $input['isActive'] = 1;//$this->input->post('isActive');
            $input['photo'] = 'testphoto';//$this->input->post('photo');

            $output["response"] = $this->usr->saveUser($input,$UserID); // call model query to save data into DB
            $output["success"] = true;
        }
        catch (Exception $ex)
        {
            $output["success"] = false;
            $output["error"] = $ex->getMessage();
        }
        echo json_encode((object)$output);
        exit;

     }

Ответы [ 2 ]

0 голосов
/ 01 сентября 2020

вам необходимо добавить ключ заголовка авторизации в Access-Control-Allow-Headers (в бэкэнде)

Access-Control-Allow-Headers: Authorization (когда вы даете это, он принимает только указанные заголовки. означает, что если вы хотите принять другой ключ, например авторизацию, вы должны указать это имя ключа)

или

, вы также можете указать это

Access-Control-Allow-Headers : *

0 голосов
/ 23 мая 2020

, если это для разработки, а не для производства, вы можете использовать прокси для решения проблемы. добавьте файл json в свой root проект с именем 'proxy.configuration. json'

не забудьте изменить цель на свой api в примере ниже 

{
    "/api/*": {
     "target": "https://localhost:44362",
     "secure": false,
     "logLevel": "debug",
     "changeOrigin": true
     }
}

затем запустите ng serve --proxy-config proxy.config. json

...