CORS Error in Angular 4 map function through php

Question

I am working on Angular4 Project.

For testing, first I had done the get request to any json api and its worked well.

Now I am working to connect the php file and testing it. In test.php I had

echo "string";

Now in console I am getting this error:

XMLHttpRequest cannot load http://localhost/php-file/test/test.php. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access.

I also attached screenshot of it. I had googled it but unable to get any solution for this.

then I had edited the test.php like below. Is it right way to do so?

<?php
      header("Access-Control-Allow-Origin: *");
      $data = ['news','dfdf','ddd'];
      echo  json_encode($data);
?>

Answer 1

This is how you need to do. You need to include headers in angular as well.

import { Http, Headers, Response, RequestOptions } from '@angular/http';


 headers = new Headers();
      requestOptions = new RequestOptions();
      this.headers.append('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
      this.headers.append('Cotent-Type', 'application/json');
      this.requestOptions.headers = this.headers;

      return this.http.post("http://localhost/php-file/test/test.php",  this.requestOptions).map‌​(res => res.json());

This is how you should make post request. Make sure to subscribe this call and then you can get data from return.

I hope it helps.