2

I'm trying to make an HTTP GET request to my API, and it returns OPTIONS 405 (Method Not Allowed) and

Access to XMLHttpRequest at 'apiurl' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Below is my code:

 const header = new HttpHeaders();
 const request_header = header.append('Authorization', this.token.toString());

 console.log(request_header.get('Authorization'));

 this.urlList = buildUrl('myurl/', {path: 'mypath'});

 return this.http.get(this.urlList,{headers: request_header} );

I've tried to do the same in Postman, C# Console App, and in ASP.NET WebForms, it worked perfectly, but in Angular I get the error mentioned above. I have a HTTP GET request for my login also in TypeScript which WORKS PERFECTLY.

**Note: I do not have access to the backend, but based on C# and Postman it works just fine.

UPDATE: Thank you guys, just to let you know I ended up using Flask with angular to make requests and it is brilliant.

K. Anye
  • 158
  • 3
  • 16
  • This is not related to angular, It's the issue with authentication while making the call. You should try to make sure you pass the authentication token or the cookie value with proper request header as needed by service. – nircraft Dec 14 '18 at 14:45
  • I've tried it like a thousand different ways and combinations, but none of them seems to work. Is there a different way to make requests in Angular? – K. Anye Dec 14 '18 at 15:42
  • I have you seen [this answer about headers being immutable?](https://stackoverflow.com/a/45286959/5899766) I had a similar issue a year ago. – wolfhoundjesse Dec 14 '18 at 15:48
  • I usually do this: `httpOptions: any = { headers: new HttpHeaders({ Authorization:' my_key_for_authentication' }) };` In the service i get the header and pass to HttpClient while making request: `const headers = this.httpOptions.headers; return this.httpClient .get(`${this.baseUrl}/muurl`, { headers, params })` – nircraft Dec 14 '18 at 16:04
  • Possible duplicate of [How to solve 'Redirect has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header'?](https://stackoverflow.com/questions/46522749/how-to-solve-redirect-has-been-blocked-by-cors-policy-no-access-control-allow) – Alex Dec 14 '18 at 16:12
  • The error says it's not working due to CORS... this is not really a typescript issue, it's simply your browser blocking reading the response. It's an HTTP safety net you need to abide by: https://stackoverflow.com/questions/46522749/how-to-solve-redirect-has-been-blocked-by-cors-policy-no-access-control-allow – Alex Dec 14 '18 at 16:13
  • None of these seems to work ... and I really don't get it, my login HTTP GET request works perfectly. In ASP.NET WebForms all of them works and it runs on Google Chrome, so I suppose the browser is fine... I played with the headers, tried everything, but no luck. – K. Anye Dec 14 '18 at 20:01

2 Answers2

2

This is a CORS issue. Your webserver hosting the REST APIs is running on a different domain than the webserver hosting the Angular static files.

Make sure you are not running your Angular on localhost and REST APIs on a separate domain or something similar. Ideally you should run both from the same domain.

Configure the REST API hosting server to allow the CORS from the Angular hosting server (localhost).

Saptarshi Basu
  • 8,640
  • 4
  • 39
  • 58
  • My API is on 172.25.x.x and I'm also on 172.25.x.x. And my login request works this way just this one doesn't (but again it works with web forms on google chrome). – K. Anye Dec 14 '18 at 20:51
  • @K.Anye then access your Angular UI using 172.25.x.x:4200 instead of localhost:4200 – Saptarshi Basu Dec 14 '18 at 20:54
  • @K.Anye javascript running on one domain cannot make HTTP call on a different domain. In your question I see you are accessing UI using http://localhost:4200. Either ensure both API and UI are accessed using localhost or both are accessed using same IP. If you can't do that, configure you server to allow CORS from the IP or localhost whatever you are using to access the UI. Please read about CORS – Saptarshi Basu Dec 14 '18 at 21:19
  • Thank you very much! Will do! – K. Anye Dec 14 '18 at 21:49
1

Postman wouldn't have any problems getting the resource here.

But as your request from Angular server is getting a Cross Origin error, you need to get the backend set with the API having your angular server address set in the Access-Control-Allow-Origin header for you to get the access of the requested resource.

If you set the Access-Control-Allow-Origin header with *, it would allow any server to get the resource but this isn't secure as anyone could get your resources without your permission.

Saahil M
  • 477
  • 5
  • 7