Angular automatically changes the http to https to load resource

Question

In my angular app, all the HTTP resources are automatically changed to https while fetching. I checked the server, and there are no automatic redirect settings configured to https.

The following are the errors I get in the console and the network tab.

core.js:3864 ERROR 
HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: "http://xxxxxx-env.eba-prmacaby.ap-south-1.elasticbeanstalk.com/all/hub/", ok: false, …}
error: ProgressEvent {isTrusted: true, lengthComputable: false, loaded: 0, total: 0, type: "error", …}
headers: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, headers: Map(0)}
message: "Http failure response for http://xxxxx-env.eba-prmacaby.ap-south-1.elasticbeanstalk.com/all/hub/: 0 Unknown Error"
name: "HttpErrorResponse"
ok: false
status: 0
statusText: "Unknown Error"
url: "http://xxxxxx-env.eba-prmacaby.ap-south-1.elasticbeanstalk.com/all/hub/"
__proto__: HttpResponseBase

In the console it says HTTP but in the network tab, it says HTTPS.

Request Code

constructor(private http: HttpClient) { }
     
 getHub( ): Observable<Hub> {
       
        return this.http.get<Hub>("http://xxxxxxxx-env.eba-prmacaby.ap-south-1.elasticbeanstalk.com/all/hub" );
      }

Can't see screenshots, could you please share error messages as text? — rcanpahali, Oct 13 '20 at 07:45
@shadowman_93 I edited the description with error text from the console. — Vishnu S Kumar, Oct 13 '20 at 07:51
Please check you IIS configuration, do you have configuretion like this? https://stackoverflow.com/a/38686154/5955138 — rcanpahali, Oct 13 '20 at 07:56
Add your request code here, i cannot help you without some code. — TheCoderGuy, Oct 13 '20 at 08:25
@Abedin.Zhuniqi I edited the description with request code. Please have a look — Vishnu S Kumar, Oct 13 '20 at 09:44
That it a bad idead direkt to call the api like that. Try Postman and try to get request with it if you have the same error. If is the same error than something in the api it is not correct. If there works then u need to check your code in FE. — TheCoderGuy, Oct 13 '20 at 09:48
The API is working fine. I have verified it from the postman. The code isn't that complex. Just stared only with a new project. — Vishnu S Kumar, Oct 13 '20 at 09:50

score 0 · Answer 1 · answered Oct 13 '20 at 09:59

0

getHub(): Observable<Hub> {  
  return this.http.get<Hub>("http://xxxxxxxx-env.eba-prmacaby.ap-south-1.elasticbeanstalk.com/all/hub" ).subscribe(test => console.log(test));
  }

Try it and show what are u expecting.

answered Oct 13 '20 at 09:59

TheCoderGuy

771
6
24
51

It can't subscribe to the response as it fails due to the https on the URL. I subscribed to the error state and the exception is given below. It is the same as the exception I see on the browser HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: "http:// xxxx-env.eba-prmacaby.ap-south-1.elasticbeanstalk.com/all/hub/", ok: false, …} – Vishnu S Kumar Oct 13 '20 at 13:55
Have you added the HttpClientModule in the `app.module.ts` – TheCoderGuy Oct 13 '20 at 14:20
Yes, there is no exception related to the code. My other HTTPS resources are loading fine. – Vishnu S Kumar Oct 13 '20 at 14:50
Try to remove the `Observable` and write a pure method. `getHub() { return this.http.get("http://xxxxxxxx-env.eba-prmacaby.ap-south-1.elasticbeanstalk.com/all/hub"); }` Look if it works and remove the white space at the end of the `all/hub` because u have a space there. – TheCoderGuy Oct 13 '20 at 15:02

Akshay · Answer 2 · 2022-11-05T17:09:15.053

0

Please check your CSP there if you have "upgrade-insecure-requests" you are upgrading your http requests to https requests.

Do not use following content attribute:-

meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"

edited Nov 05 '22 at 17:09

answered Nov 05 '22 at 17:08

Akshay

1
1

Angular automatically changes the http to https to load resource

2 Answers2