-1

My component file: 

import { Component , OnInit } from '@angular/core';
import {Http , Response} from '@angular/http';
import { FormGroup , FormBuilder, Validators } from '@angular/forms';
import  'rxjs/add/operator/map';


@Component({ 

      selector: 'app-banner' ,
      templateUrl:'./banner.component.html' ,

})

export class BannerComponent  
{



    url: string = "http://localhost/demos/items.php";
data = [];
   complexForm : FormGroup;

 constructor(fb: FormBuilder , private http:Http) { 



    this.complexForm = fb.group({
      'firstName' : [null, Validators.required]
    })
  }

  onSubmit(value: any ){

 this.http.post(this.url ,JSON.stringify(value) ).map((res:Response) => res.json() ).subscribe(ans => {
       this.data = ans;
       console.log(this.data);
   });

}

  }

In angular2 I got an error like this:

Failed to load http://localhost/demos/items.php: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access.

sideshowbarker
  • 81,827
  • 26
  • 193
  • 197
Narang Chirag
  • 1

1 Answers1

0

You can try to add Access-Control-Allow-Origin in the response header from the back end web service

for example like this:

resp.setHeader('Access-Control-Allow-Origin','*')

and then return the response to the angular client.

more information here:

origin-is-not-allowed-by-access-control-allow-origin

access-control-allow-origin-issue-in-angular-2

HDJEMAI
  • 9,436
  • 46
  • 67
  • 93