Making a Get Request Across Domain & Port Angular2 To PHP - php

Question

After running through this quick example of a GET request from Angular2 to a PHP file I continue to get -
Error 304
I am testing the difference between using node and php for the back end of an angular2 app. I have a simple GET request which is trying to retrieve a small amount of data from a php file.
The request seems to be going fine but the file is not being provided to the app.
304 NOT MODIFIED A conditional GET or HEAD request has been received
and would have resulted in a 200 OK response if it were not for the
fact that the condition evaluated to false.
In other words,
there is no need for the server to transfer a representation of the target resource because the request indicates that the client, which made the request conditional, already has a valid representation; the server is therefore redirecting the client to make use of that stored representation as if it were the payload of a 200 OK response.
CORS
I have CORS allowed inside the express app.js file.
I have CORS allowed in the PHP file.
How can I overcome this issue? I would at least like to console.log the data from the ng2 side.
Code Examples
PHP // Running on Apache port 80 # api.example.com
<?php
header("Access-Control-Allow-Origin: *");
$data = array(
array('id' => '1','first_name' => 'Cynthia'),
array('id' => '2','first_name' => 'Keith'),
array('id' => '3','first_name' => 'Robert'),
array('id' => '4','first_name' => 'Theresa'),
array('id' => '5','first_name' => 'Margaret')
);
echo json_encode($data);
?>
Angular2 // Running on Express Server # localhost:4200
import {Http, Response} from '#angular/http';
import {Injectable, Component } from '#angular/core';
#Component({
selector: 'my-app',
template: `<ul>
<li *ngFor="let person of data">
{{person.id}} - {{person.first_name}}
</li>
</ul>`
})
export class AppComponent {
private data;
constructor(private http:Http){
}
ngOnInit(){
this.getData();
}
getData(){
this.http.get('api.example.com/index.php')
.subscribe(res => this.data = res.json());
}
}
I have tried to modify the getData() function none which have worked. Most recently this,
getData(){
let url = 'api.example.com/index.php';
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });
this.http.get(url, options)
.subscribe(res => {
this.data = res.json();
console.log(this.data);
});
}

Answer 1

I had similar issue but have been able to fix it by setting the following headers on my api script;
if (isset($_SERVER['HTTP_ORIGIN'])) {
header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}");
header('Access-Control-Allow-Credentials: true');
header('Access-Control-Max-Age: 86400'); // cache for 1 day}
// Since Access-Control headers are received during OPTIONS requests
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD']))
header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']))
header("Access-Control-Allow-Headers: {$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}");
exit(0); }
Hope it helps