HttpClient.get for reading a file

Question

From an Angular 8 client I want to read a file located at: C:\inetpub\wwwroot IIS is running. I used the following code and got this error:

Access to XMLHttpRequest at 'http://localhost/MyFile.xml' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

In IIS configuration I added: Access-Control-Allow-Origin, * to: HTTP Response Headers.

But I got the above error also when IIS was stopped.

Can you please explain what is wrong ?

Thank you in advance, Zvika

let headers = new HttpHeaders;
headers.append ('Access-Control-Allow-Origin','*');
this.http.get ('http://localhost:80/dwell.xml',{headers: 
headers}).subscribe(
  (val) => {
      console.log("GET call successful value returned in body", 
                  val);
  },
  response => {
      console.log("GET call in error", response);
  },
  () => {
      console.log("The GET observable is now completed.");
  });

Possible duplicate of [Response to preflight request doesn't pass access control check](https://stackoverflow.com/questions/35588699/response-to-preflight-request-doesnt-pass-access-control-check) — The Fabio, Oct 20 '19 at 12:00

score 1 · Answer 1 · answered Oct 13 '19 at 11:44

You have stepped into the usage of CORS one of the first issues one has to resolve when deploying angular aps to the real world.

I see you have attempted to set the header 'Access-Control-Allow-Origin','*' in your request, but this will not work. The Browser would only really accept the header if its first authorized by the API your app is talking to (as described in this Wikipedia article)

When you have an angular app talking to an API of another domain (or another port in the same domain, in your case), that API needs to authorize the CORS request; otherwise the browser running angular will give you the "blocked by CORS policy" error. This is not only for angular but for any request from this browser involving multiple domains.

Once you get your understanding of CORS up to date, you will see why all Browsers would only consider sending a CORS request if they are explicitly authorized by the API. It really improves security.

To configure CORS on IIS, you will need to configure the IIS CORS module . This should be as simple as adding the lines described in this configuration link, and restarting IIS.

You could also disable the CORS protection on your Browser, but I would not recommend it. Learning how to work with CORS in angular apps is something that will reduce your problems when you really want to release it to a production environment.

no worries! my pleasure, if you could, please mark my answer as resolved and we are done! — The Fabio, Oct 15 '19 at 00:29

score 0 · Answer 2 · answered Oct 13 '19 at 08:21

When you are trying to access domain1.com from the domain2.com under the hood, most of the modern browsers, send a request to the server and check whether the Access-Control-Allow-Origin header was present in the response.

When a server is down a browser cannot get any response, therefore, this request gets blocked.

For development purposes, you can:

Disable CORS policies in the browser (in settings or using extensions).
As far as you are working with Angular and most likely with npm, you can configure proxy and then just send requests to the main domain. The development server will forward these requests to the destination. Angular Proxy Configuration
Debug and configure your webserver correctly so it returns correct headers, please also pay attention to the domain returned with the Access-Control-Allow-Origin

HttpClient.get for reading a file

2 Answers2

Linked