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, Sep 21 '18 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, Sep 21 '18 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, Sep 21 '18 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, Sep 22 '18 at 19:54

score 1 · Answer 1 · answered Aug 10 '21 at 15:28

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 '21 at 15:28

David Kyle

11
1
2

Just my two cents: it is impossible to do vice versa: https to http. See this answer of Julien Ambrosio: https://stackoverflow.com/questions/74756751/cant-send-a-axios-request-from-https-to-http-server – tGilvonas Mar 30 '23 at 13:45

Axios with Vue access http instead of https

1 Answers1