Making a Get Request Across Domain & Port Angular2 To 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);
        });
  }

maybe this will help http://stackoverflow.com/questions/26166433/how-to-prevent-request-that-returns-304/26339940#26339940 — Suraj Rao, Feb 04 '17 at 07:27
@suraj Thank you. Sigh. that was a lot of time wasted. What a pain man. I have never received error 304 before. Thanks! — wuno, Feb 04 '17 at 07:37

score 1 · Accepted Answer · answered Feb 15 '17 at 09:25

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

lyke I appreciate your input. I solved the problem a while back but hopefully this helps someone else. — wuno, Feb 15 '17 at 15:22

Making a Get Request Across Domain & Port Angular2 To PHP

1 Answers1