为什么axios在发出请求时总是将https转换为http?

为什么axios在发出请求时总是将https转换为http?,http,https,vuejs2,axios,laravel-5.8,Http,Https,Vuejs2,Axios,Laravel 5.8,我正在使用Laravel 5.8和现成的预配置Vue.js baseURL: 'https://yourdomain.com/', url: '/controller-name/action-function-name', 为了在Vue.js组件中发出GET/POST/PUT/DELETE请求,我使用AXIOS,如下所示: import axios from 'axios' const obj = axios.create({ baseURL: '/controller-name/act

我正在使用Laravel 5.8和现成的预配置Vue.js

baseURL: 'https://yourdomain.com/',
url: '/controller-name/action-function-name',
为了在Vue.js组件中发出GET/POST/PUT/DELETE请求,我使用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}`)
  }
}
baseURL: 'https://yourdomain.com/',
url: '/controller-name/action-function-name',
使用
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.
baseURL: 'https://yourdomain.com/',
url: '/controller-name/action-function-name',
我明白这一点,因为我的应用程序运行在
HTTPS
域上,但是
AXIOS
发出的请求是通过
HTTP
发出的。这就是它不起作用的原因

baseURL: 'https://yourdomain.com/',
url: '/controller-name/action-function-name',
我的问题是,为什么AXIOS在发出请求时将
HTTPS
转换为
HTTP
url

baseURL: 'https://yourdomain.com/',
url: '/controller-name/action-function-name',
我确实尝试了以下硬代码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}`)
  }
}
baseURL: 'https://yourdomain.com/',
url: '/controller-name/action-function-name',

如您所见,所有硬代码url都以
https
作为前缀。每次我点击菜单链接时,
AXIOS
总是用
http
url覆盖我的
https
硬代码url。我如何解决这个问题?

为什么不执行以下操作:

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

您的回答确实有一点帮助,它现在应用了配置的baseURL,在创建axios的实例对象时也必须设置url,但它不使用配置的url作为控制器的操作函数名。谢谢你的帮助!我找到了解决办法。实际上,url不需要设置,baseURL也不需要是完整的域名。我的第一段代码片段是正确的。问题是我的控制器是一个普通的web控制器,它响应可以通过web浏览器访问的JSON数据。它需要是一个Restful API来处理来自AXIOS的请求。我的案例是关于在Laravel 5.8中使用AXIOS的Vue.js。