0

I'm trying to access web service from my angular service with cross-origin related headers set. But still, I'm not able to access the web service. The browser keeps saying,

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access. The response had HTTP status code 403.

I'm able to access the same URL in the browser (chrome) and postman but not in angular application. 

private headers = new HttpHeaders()
.set('Access-Control-Allow-Origin', '*')
.set('Content-Type', 'application/json;charset=UTF-8')
.set('Access-Control-Allow-Headers', '*')
.set('Access-Control-Allow-Methods', 'GET, OPTIONS');

public getData(): Promise<Object> {
  return this._http.get(this._url, {headers: this.headers})
  .toPromise()
  .then(response => {
      return response;
    }
  )
  .catch(testService.handleError);

}

Is there anything I'm missing here...

Rajashree Gr
  • 519
  • 1
  • 9
  • 18
  • Can we see the value of `this._url` please? – Randy Casburn Apr 16 '18 at 22:46
  • 3
    Is the posted code for the client requesting the resource, or for the server? It's the server that needs to set the CORS headers when sending the response, not the client in the request. – CRice Apr 16 '18 at 22:50
  • If I'm thinking good, you are trying to access to a web service running on your localhost. To do this, you have to allow CORS in your web service and not in angular. The error show you that the server (or web service) you try to access doesn't authorized you to request him. The server do that for some security raison. If you want more information, check CORS error on google. – Nathan Meunier Apr 16 '18 at 23:00
  • Sorry, my page hasn't refreshed, CRice answered your question – Nathan Meunier Apr 16 '18 at 23:02
  • Ok. thanks @CRice & Nathan. The posted code is for requesting the resource from the server. – Rajashree Gr Apr 16 '18 at 23:45

3 Answers3

0

So, there is two approaches

  1. If you have an access to edit the web service.

    You need to allow Cross Origin Resource sharing. if u are using Node.js here is an example of code to add 

    // ~ Cross origin resource sharing ~ //
var cors = require('cors');
// ~ Initialize the app ~ //
var app = express();
// ~ Enbling CORS ~ //
app.use(cors());

  2. You can add a browser extension that enables you fix CORS errors for the angular app while running on browser.

Here is for chrome https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en

Here is for Mozilla https://addons.mozilla.org/en-US/firefox/addon/cors-everywhere/

You can read more at https://enable-cors.org/

I hope that helps. If there is any error let me know through comments.

bereket gebredingle
  • 12,064
  • 3
  • 36
  • 47
0

There are multiple ways to solve this issue, but first you will need to identify the extra request header parameter that is getting send by the client, if any.

It's earlier to spot this by using any of the broswer's developer console. Another pointer is to check the response/error for options call if any.

Once identified, you will need to enable the appropriate response parameters from the server, in your case it seems the options call is not setting Access-Control-Allow-Origin in the response.

Let me know if this helped you diagnose your issue.

akhouri
  • 3,065
  • 3
  • 25
  • 29
0

Try JSONP. Basically as per WC3Schools states

JSONP is a method for sending JSON data without worrying about cross-domain issues.

JSONP does not use the XMLHttpRequest object.

Here's an explanation of how JSONP works

0x777
  • 825
  • 8
  • 14