我正在使用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
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?
我确实尝试了以下硬编码网址。
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
总是用http
url覆盖我的https
硬编码url。我该如何解决这个问题?
2条答案
按热度按时间z9ju0rcb1#
你为什么不做以下的事情:
vs3odd8k2#
如果它确实对某个人有效,那么问题就出在后面。要接收的URL不能在末尾有“/”,因为如果它导致了到http的重定向
之前:
之后: