Почему axios всегда конвертирует https в http при выполнении запроса?

Question

Я работаю с Laravel 5.8 и предварительно настроенным Vue.js.

Для выполнения запроса GET / POST / PUT / DELETE в компонентах Vue.js я использую AXIOS следующим образом:

import axios from 'axios'

const obj = axios.create({
  baseURL: '/controller-name/action-function-name'
})

export default {
  all (params) {
    return obj.get('/', params)
  },
  find (id) {
    return obj.get(`/${id}`)
  },
  store (data) {
    return obj.post(``, data)
  },
  update (id, data) {
    return obj.put(`/${id}`, data)
  },
  delete (id) {
    return obj.delete(`/${id}`)
  }
}

В моем локальном окружении все работает нормально с виртуальным хостом HTTP, например. http://my-website.com. Пока я не развернул свое приложение на реальном хостинг-сервере с HTTPS url, например. https://my-website.com, мое приложение больше не работает, и я получаю следующую ошибку.

Mixed Content: The page at 'https://my-website.com/path#/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://my-website.com/path/controller-name/action-function-name'. This request has been blocked; the content must be served over HTTPS.

Я понимаю, что, поскольку мое приложение работает в домене HTTPS, но запрос, который AXIOS делает через HTTP. Вот почему это не работает.

У меня вопрос, почему AXIOS конвертирует HTTPS в HTTP URL при выполнении запроса?

Я попробовал следующее с URL-адресом жесткого кода.

import axios from 'axios'

export default {
  all (params) {
    return obj.get('https://my-website.com/controller-name/action-function-name/', params)
  },
  find (id) {
    return obj.get(`https://my-website.com/controller-name/action-function-name/${id}`)
  },
  store (data) {
    return obj.post(`https://my-website.com/controller-name/action-function-name`, data)
  },
  update (id, data) {
    return obj.put(`https://my-website.com/controller-name/action-function-name/${id}`, data)
  },
  delete (id) {
    return obj.delete(`https://my-website.com/controller-name/action-function-name/${id}`)
  }
}

Как видите, весь URL жесткого кода имеет префикс https. Каждый раз, когда я нажимаю на ссылку меню, AXIOS всегда заменяет мой https URL-адрес жесткого кода на http url. Как я могу это исправить?

Answer 1

Почему бы вам не сделать следующее:

baseURL: 'https://yourdomain.com/',
url: '/controller-name/action-function-name',