title: post error in angular 5 No 'Access-Control-Allow-Origin' header is present on the requested resource.
body: <p>I am receiving this error when in angular 5 when I trying to consume a rest method (post):</p>
  
  <p>Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '<a href="http://localhost:4200" rel="nofollow noreferrer">http://localhost:4200</a>' is therefore not allowed access.</p>
  
  <p>This is the service:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import {Injectable} from '@angular/core';
  import {HttpClient, HttpHeaders} from '@angular/common/http';
  import {Observable} from 'rxjs/Rx';
  
  @Injectable()
  export class ImageProvider{
      public url: string;
      
      constructor( public http: HttpClient){
  
          this.url='https://api.flickr.com/services/feeds/photos_public.gne?format=json&amp;nojsoncallback=1&amp;tags=?';
      }
      
      getImages(): Observable&lt;any&gt;{
                   
      
              let params = 'format=json&amp;nojsoncallback=1&amp;tags=?';     
                      
              let headers = new HttpHeaders().set('Content-Type','application/x-www-form-urlencoded');
               
              return this.http.post(this.url+'productos', params, {headers: headers});
      }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>and this is the component</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { Component, OnInit } from '@angular/core';
  import {ImageProvider} from '../../services/imageProvider';
  
  @Component({
    selector: 'app-carousel',
    templateUrl: './carousel.component.html',
    styleUrls: ['./carousel.component.css']
  })
  export class CarouselComponent implements OnInit {
    public responseFlirck
    constructor(private _imageProvider: ImageProvider) { }
  
    ngOnInit() {
    
      this.getImagesFromFlirk();
    }
  
  
    getImagesFromFlirk(){
  
      this._imageProvider.getImages().subscribe(
        result =&gt; {  
          
            this.responseFlirck = result.data;
           
        },
        error =&gt; {
            console.log('Error in post');
            console.log(error);
        }
    );
    }
  
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>However in soap UI works fine:</p>
  
  <p><a href="https://i.stack.imgur.com/hP9el.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hP9el.png" alt="enter image description here"></a></p>
  
  <p>Could someone please fix my code?</p>
  
  <p>Thanks so much!</p>