CODEWITHSUNDEEP
node.jsangularhttpsmixed-content
Usman Hafeez
Usman Hafeez

Reputation: 365

Mixed-Content: the page at 'domain' was loaded over HTTPS, but requested an insecure HTTP endpoint in Angular

I deployed my angular app using the domain with SSL on port 4200 that is communicating with API on the same server and port 3000. Now the issue is that when I place BASE_URL as an IP with HTTP, it works fine but when on HTTP it gives mixed-content HTTPS to HTTP error. I also tried the proxy-config method but it didn't work. Is there any way to communicate with the same server via local IP (127.0.0.1) instead of server IP? CORS already enabled on API end (Node.js)

Mixed-Content: the page at 'domain' was loaded over HTTPS, but requested an insecure HTTP endpoint in Angular

Upvotes: 1

Views: 3789

Answers (2)

bahram mosadegh
bahram mosadegh

Reputation: 9

try this:

 ngrok http 3000 --response-header-add Content-Security-Policy:upgrade-insecure-requests

Upvotes: 0

Douglas Liu
Douglas Liu

Reputation: 1692

AFAIK, I think loading http API from https URL will be blocked, always.

If you don't mind refactor your code to allow configurable api endpoint rather than always using http://localhost:3000. You will have several options to turn your http API into HTTPS.

  1. You can try ngrok. It lets you convert your http service into https without having to setup the web server, certificates ... etc.

    The free version will not have a stable domain name. It will be different every time you start new ngrok session. Just leave the session on for as long as you can, so that you don't have to worry about the changing names very often. IMHO, it should be sufficient for development.

  2. You may also setup self signed certificate for your API. If your API server do not support HTTPS mode, you'll have to install a web server that can handle the HTTPS request and proxy it to your api.

    Installation can be made very easy with docker. The certificate is a bit more complicated, but there're guides around on the net.

  3. Or, you can run your Angular server in HTTP mode. It should fix the warning but is more risky as the development environment is much different from the production environment, which may bring you surprises when deploying. So is less recommended.

Upvotes: 0

Related Questions