Axios with Vue access http instead of https

Question

I am using vue2 and axios to make my ajax calls. In a page I am calling various ajax calls, some go as HTTPS while others go through HTTP, although both codes are similar.

Example:

        axios.get('/api/' + app.$variable1 + '/get-something/')
        .then(({ data }) =>
        {
            app.array = [];

            for(let i = 0; i < data.length; i++)
            {
                app.vats.push({
                    id:data[i]['id'],
                    name:data[i]['name'],
                    something_else[i]['something_else']
                });
            }
        })

Question: How can I force Axios to take HTTPS?

Objs: I cannot manually add https, as such: "https://www.example.com/1234/12" because I am using relative urls (I have certain id's assigned at url, and reuse them to make my calls).

Server: 1) I am forcing Https through htaccess 2) I am also using Secure Headers which does not allow the browser to get out of "self"

EDIT:

So trying to get down to the issue: 1) In the Mounted method I am calling 4 individual API's. The first two fail due to HTTP, and the last two get through. I tried chaning the order, and its always the first two to fail. I tried to move the code to Created, which makes less sense, and sure enough it did not work.

HELP!!

This snippet is nowhere enough to diagnose this. Do you have an htaccess or something sometimes forcing https? — ggdx
– ggdx, Commented Sep 21, 2018 at 12:49
Yes, I am forcing https plus I am also using secure headers which does not allow browser to leave the current domain (https). — Abhishek Shah
– Abhishek Shah, Commented Sep 21, 2018 at 13:03
Since you are using relative urls, you should make your sever force the page to be https in the first place with url rewrite in iis or express-force-ssl in express. It sounds like you are allowing http traffic in some scenario, possibly from a server running in a dev environment. — Leo Bartkus
– Leo Bartkus, Commented Sep 21, 2018 at 19:39
@LeoBartkus , Thats what I thought, but the Vue+Axios is calling Http, and the browser is blocking it. That means that the call never reached the server. — Abhishek Shah
– Abhishek Shah, Commented Sep 22, 2018 at 19:54

David Kyle · Accepted Answer · 2021-08-10 15:28:21Z

1

Add an Axios request interceptor and change the config.url from http to https. All requests will be intercepted and you will have access to the base URL scheme.

  const instance = axios.create({
    baseURL: 'http://api.com',
  })

  instance.interceptors.request.use(function(config) {
    // change the url scheme from http to https
    config.url = config.url.replace('http://', 'https://')

    return config
  })

answered Aug 10, 2021 at 15:28

David Kyle

311 silver badge3 bronze badges

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

1 Comment

tGilvonas Over a year ago

Just my two cents: it is impossible to do vice versa: https to http. See this answer of Julien Ambrosio: stackoverflow.com/questions/74756751/…

Collectives™ on Stack Overflow

Axios with Vue access http instead of https

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related