html link tag to new tab with https link redirects to http-CodePudding

I have some simple code.

<a 
    href="https://api.url.com/params/are/here"
    target="_blank"
>A link!</a>

It is running in a statically hosted vue 3 app without nginx, apache or anything else under it.

There is a login page that redirects the user to this app so the user gets credentials and all of the requests are secured on https.

Now when the user clicks this link, the link is redirected to http://api.url.com/params/are/here

This unsecure http request ends up hitting the wrong port and the request eventually just times out in the new tab. However, if I edit the link in the new tab after it times out from the url: http://api.url.com/params/are/here to https://api.url.com/params/are/here The page loads fine.

I have also attempted adding this to the head:

  <head>
    <meta
      http-equiv="Content-Security-Policy"
      content="upgrade-insecure-requests"
    />
  </head>

But that doesn't seem to help.

How can I force the request to be made to the https link?

CodePudding user response：

In my case, the api server I was trying to fetch a page from lived on a separate domain that redirected to a load balancer on aws.

I updated our security group to allow http traffic, then on the load balancer I updated the associated rules to redirect all traffic from http to https.

This keeps everything secure, and then I don't have to think about it client side :)