Question

我正在使用Laravel 5.8和开箱即用的预配置Vue.js。

为了在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}`)
  }
}

在我的本地环境中，使用HTTP虚拟主机，例如http://my-website.com。直到我将应用程序部署到具有HTTPS网址的真实托管服务器上，例如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中？

我确实使用硬代码网址尝试了以下操作。

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网址覆盖我的http硬代码网址。我该如何解决？

Answer 1

为什么不执行以下操作：

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

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

1 个答案: