I think that there are plenty of similar topics here and there on the internet, but I did just spend 1h searching and still can't fix this.

I cannot make a request with POST on my server (Apache & PHP) with Angular.

I use angular/cli v.6.2.1 with node 10, apache 2.4 & php 7.1

Here is a simple code from the Http call (HttpClient & HttpHeaders both e from @angular/mon/http) :

constructor(private http: HttpClient){}

this.http.post('http://localhost/distributor.php', ['prop1':'value1', 'prop2':'value2'], {headers: new HttpHeaders().set('Access-Control-Allow-Origin','*')}).subscribe(
data => {
    console.log(data);
},
err => {
    console.log('error');
});

}

I just try to send something back from PHP this way :

<?php
    $data = $_POST;
    echo json_encode($data);

I already allowed all origins in apache configuration file. Both Firefox & Chrome just let me down after a "OPTIONS" preflight and do not do anything else, no return from the PHP file.

Here is what FireFox shows me :

and I can see this in the network tab :

Response tab shows a pletely empty box.

I can remove the custom header's part from my http.post it changes nothing.

What seems strange to me is that I can click the FireFox edit & resend button, without changing nothing, and the right results appear...

Thanks for reading/help

I think that there are plenty of similar topics here and there on the internet, but I did just spend 1h searching and still can't fix this.

I cannot make a request with POST on my server (Apache & PHP) with Angular.

I use angular/cli v.6.2.1 with node 10, apache 2.4 & php 7.1

Here is a simple code from the Http call (HttpClient & HttpHeaders both e from @angular/mon/http) :

constructor(private http: HttpClient){}

this.http.post('http://localhost/distributor.php', ['prop1':'value1', 'prop2':'value2'], {headers: new HttpHeaders().set('Access-Control-Allow-Origin','*')}).subscribe(
data => {
    console.log(data);
},
err => {
    console.log('error');
});

}

I just try to send something back from PHP this way :

<?php
    $data = $_POST;
    echo json_encode($data);

I already allowed all origins in apache configuration file. Both Firefox & Chrome just let me down after a "OPTIONS" preflight and do not do anything else, no return from the PHP file.

Here is what FireFox shows me :

and I can see this in the network tab :

Response tab shows a pletely empty box.

I can remove the custom header's part from my http.post it changes nothing.

What seems strange to me is that I can click the FireFox edit & resend button, without changing nothing, and the right results appear...

Thanks for reading/help

• javascript
• php
• angular
• cors
• xmlhttprequest

Share Improve this question Follow asked Sep 13, 2018 at 12:28 Julo0sSJulo0sS 2,10255 gold badges3131 silver badges5353 bronze badges 4

• 1 You need to call header("Access-Control-Allow-Origin: *); in your PHP code, not on the client side. Otherwise anybody could easily circumvent CORS entirely. – user5734311 Commented Sep 13, 2018 at 12:33
• It changes nothing. I have put it the way you mention it at the top of my PHP file, and nothing changes. Btw, as you can see in the "Response headers" part, the "Access-Control-Allow-Origin" is set to *... – Julo0sS Commented Sep 13, 2018 at 12:36
• @Julo0sS and please show your php code also – Exterminator Commented Sep 13, 2018 at 13:07
• also, check if there is any error message in console – Exterminator Commented Sep 13, 2018 at 13:11

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 10

First you need to fix your POST data; you have square brackets around Object syntax.

const data = { 'prop1': 'value1', 'prop2': 'value2' };
this.http.post('http://localhost/distributor.php', data).subscribe(
  reply => {
    console.log(reply);
  },
  err => {
    console.log('error', err);
  });

Next, you need to add proper headers and set PHP up to deal with JSON:

<?php
header('Access-Control-Allow-Headers: Access-Control-Allow-Origin, Content-Type');
header('Access-Control-Allow-Origin: *');
header('Content-Type: application/json, charset=utf-8');

// grab JSON data sent by Angular
$data = json_decode(file_get_contents('php://input'), true);
// add numeric data
$data["prop3"] = 3;
// reply
echo json_encode($data, JSON_UNESCAPED_UNICODE | JSON_NUMERIC_CHECK);

This worked for me.

I had the same issue but it resolved by adding these lines to your php code

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Headers: X-Requested-With');
header('Access-Control-Allow-Methods: POST, GET, OPTIONS');
header('Content-Type: application/json');

let data = {
            'prop1': 'value1',
            'prop2': 'value2'
        };
        return this.http.post('http://localhost/distributor.php', data, {headers: new HttpHeaders().set('Access-Control-Allow-Origin', '*')}).map((response: Response) => {
            let data = response;
            if (data) {
                console.log(data);
            }
        })