CODEWITHSUNDEEP
javascriptphpangularcorsxmlhttprequest
Julo0sS
Julo0sS

Reputation: 2102

CORS Issue - Angular / PHP / Apache

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 come from @angular/common/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 :

enter image description here

and I can see this in the network tab :

enter image description here

Response tab shows a completely 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

Upvotes: 0

Views: 6839

Answers (2)

user5734311
user5734311

Reputation:

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.

Upvotes: 10

Exterminator
Exterminator

Reputation: 1246

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

Upvotes: 0

Related Questions