CORS Issue - Angular / PHP / Apache

Question

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 :

and I can see this in the network tab :

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

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
– 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
– Julo0sS, Commented Sep 13, 2018 at 12:36

user5734311 · Accepted Answer · 2018-09-13 13:15:49Z

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.

answered Sep 13, 2018 at 13:15

user5734311

Sign up to request clarification or add additional context in comments.

2 Comments

Julo0sS Over a year ago

Indeed. The headers were allright, there was no problem on this side. The only problem was coming from the brackets around the object I was sending. Once this is fixed then the request magically becomes POST instead of OPTIONS and everything is fine. Thanks for helping

Juan Joya Over a year ago

It's 1:30 in the morning, I'm applying for a job I really need, and I've been stuck for 1 hour because of that. Thank you, thank you, all my grattitude for you

Exterminator · Accepted Answer · 2018-09-13 13:03:34Z

0

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

edited Sep 13, 2018 at 13:03

answered Sep 13, 2018 at 12:39

Exterminator

1,2467 silver badges14 bronze badges

1 Comment

Julo0sS Over a year ago

same problem. Copy/paste of your headers into my PHP and still no response coming from it.

Collectives™ on Stack Overflow

CORS Issue - Angular / PHP / Apache

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related