No 'Access-Control-Allow-Origin' header is present on the requested resource while accessing a local server by angular app : <p>I was trying to get results from a local server. The class which I am using in the service is as follows:</p>

<pre><code>@Injectable()
export class GridSearchService {

  server = 'http://127.0.0.1:8100';
  searchURL = this.server + '/yacy/grid/mcp/index/yacysearch.json?query=';
  constructor(private http: Http,
              private jsonp: Jsonp,
              private store: Store&lt;fromRoot.State&gt;) {
  }

  getSearchResults(searchquery) {


    return this.http
      .get(this.searchURL+searchquery).map(res =&gt;
          res.json()
      ).catch(this.handleError);

  }
</code></pre>

<p>but I was getting this error in console</p>

<pre><code>Failed to load http://127.0.0.1:8100/yacy/grid/mcp/index/yacysearch.json?query=india: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access.
</code></pre>

<p>Then I followed this answer <a href="https://stackoverflow.com/a/37228330/7407321">https://stackoverflow.com/a/37228330/7407321</a> and set headers accordingly. The new code looks like this:</p>

<pre><code>@Injectable()
export class GridSearchService {

  server = 'http://127.0.0.1:8100';
  searchURL = this.server + '/yacy/grid/mcp/index/yacysearch.json?query=';

  constructor(private http: Http,
              private jsonp: Jsonp,
              private store: Store&lt;fromRoot.State&gt;) {
  }

  getSearchResults(searchquery) {
    let params = new URLSearchParams();

    params.set('query',searchquery);


    let headers = new Headers({ "Access-Control-Allow-Origin":"*",
                                "Access-Control-Allow-Credentials":"true",
                                "Access-Control-Allow-Methods": "GET,HEAD,OPTIONS,POST,PUT",
                                "Access-Control-Allow-Headers": "Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers"});
    let options = new RequestOptions({ headers: headers, search: params });

    return this.http
      .get(this.searchURL,options).map(res =&gt;
          res.json()
      ).catch(this.handleError);

  }
</code></pre>

<p>I get this error message now:</p>

<pre><code>Failed to load http://127.0.0.1:8100/yacy/grid/mcp/index/yacysearch.json?query=&amp;query=india: Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers in preflight response.
</code></pre>

<p>Using a CORS plugin is working fine but can it be done without that.</p>
