Angular: HTTP GET request - OPTIONS 405 (Method Not Allowed)

Question

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.

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
– nircraft, Commented Dec 14, 2018 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
– K. Anye, Commented Dec 14, 2018 at 15:42
I have you seen this answer about headers being immutable? I had a similar issue a year ago. — wolfhoundjesse
– wolfhoundjesse, Commented Dec 14, 2018 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
– nircraft, Commented Dec 14, 2018 at 16:04
Possible duplicate of How to solve 'Redirect has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header'? — Alex
– Alex, Commented Dec 14, 2018 at 16:12

Saptarshi Basu · Accepted Answer · 2018-12-15 05:17:01Z

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).

edited Dec 15, 2018 at 5:17

answered Dec 14, 2018 at 20:37

Saptarshi Basu

9,3694 gold badges42 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

K. Anye Over a year ago

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).

Saptarshi Basu Over a year ago

@K.Anye then access your Angular UI using 172.25.x.x:4200 instead of localhost:4200

Saptarshi Basu Over a year ago

@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 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

K. Anye Over a year ago

Thank you very much! Will do!

Saahil M · Accepted Answer · 2018-12-15 05:13:20Z

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.

answered Dec 15, 2018 at 5:13

Saahil M

5491 gold badge5 silver badges8 bronze badges

Collectives™ on Stack Overflow

Angular: HTTP GET request - OPTIONS 405 (Method Not Allowed)

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related