Vue-select 组件的混合内容

Question

这有点奇怪。

在我的本地开发环境中，这工作得很好，但一旦我进入暂存或实时服务器 - 事情就不会那么顺利了。

我正在使用 Vue.js 的 https://vue-select.org/ 组件来根据用户输入提取选项。当 select 文本区域发生变化时，我对方法进行去抖动并将字符串触发为 API 并拉回与用户输入相关的任何结果。然后将其填充到 'options' 数组中，select 动态更新和使用该数组。

API link 是使用我的 .env 文件中的变量指定的。在我使用 Laravel Valet 的本地环境中，这工作正常。

当站点切换到实时服务器时，事情就变得有趣了。当我尝试在 select 字段中输入一个值时，我得到了这个结果：

Mixed Content: The page at 'https://example.com/cv/1fa2383/edit' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://example.com/api/job_title_names'. This request has been blocked; the content must be served over HTTPS.

现在，您会假设这是因为请求是通过 HTTP 而不是 HTTPS 加载的。这是奇怪的部分。没有硬编码或定义为变量的地方没有 HTTP 请求，只有 HTTPS。我已经对这个和 re-written 甚至 hard-coded HTTPS links 进行了四重测试，但由于某种原因，该组件一直尝试通过 HTTP 加载请求。

这真的很奇怪，因为它试图触发两个请求。一个是 GET，另一个是 POST。 POST 是我的 Axios 脚本应该做的，但是由于某些未知原因添加了 GET 请求。正如您将在下面看到的，没有为该组件的获取请求构建代码。

我对此束手无策。以下是有关我的组件和元素参考的一些信息：

我的环境变量：（.test 是我的开发顶级域名）。

test 是我的开发顶级域名
/api/ 是我的大部分 axios 请求所经过的。

APP_URL=http://example.test
APP_API_URL=http://example.test/api/

我的输入：

<label>
    <span class="block font-bold mb-2 text-grey-500 text-sm">Job Title <i class="fad fa-question-circle leading-none text-blue-400" v-tooltip.top-center="'What was your role in this company?'"></i></span>
    <v-select taggable :options="jobTitleOptions" @search="fetchJobTitleOptions" v-model="newEmployment.jobTitle" :filterable="false" class="dynamic-select" placeholder="Type a Job Title">
        <template slot="no-options">
            Type to find your job title...
        </template>
    </v-select>
</label>

我的方法：

fetchJobTitleOptions (search, loading) {
    loading(true);
    this.searchJobTitles(loading, search, this);
},
searchJobTitles: _.debounce((loading, search, vm) => {
    console.log('Job Title Url: ' + vm.jobTitleOptionsUrl);
    if(search != '') {
        axios.post(vm.jobTitleOptionsUrl, {
            name: escape(search)
        })
        .then(response => {
            let data = response.data;
            vm.jobTitleOptions = data;
            loading(false);
        });
    } else {
        loading(false);
    }
}, 500),

计算：

jobTitleOptionsUrl: function() {
    return this.url + 'job_title_names/'
},

我的组件参考：

apiurl是APP_API_URL的值赋给了不同的vue变量。

<edit-employment :apiurl="apiurl" :cvid="this.cv_id"></edit-employment>

Blade 模板：

@extends('layouts/app')
@section('content')
    <edit-cv url="{{ env('APP_URL') }}" api="{{ env('APP_API_URL') }}" cvid="{{ $cv_id }}" urlslug="{{ $url_slug }}"></edit-cv>
@endsection

使用 Vue 工具，我可以看到所有 link 都被正确引用，没有一个在它们之前有 HTTP 前缀。

我在本地环境中是运行 Nginx，但在我的服务器上是运行 Apache。我不确定这是否有助于诊断？

我尝试解决此问题的步骤：

我已经成功地从 Laravel 方面刷新了所有缓存
我已经 return 编辑了 Laravel 中的变量并且可以确认它们 return 正确。
我有 re-written 大多数变量以确保它们 100% 正确
我检查了包版本是否有冲突，没有。

如有任何帮助，我们将不胜感激。

谢谢

Answer 1

我通过仔细检查我的路线解决了这个问题。在 Laravel 中使用 API 尤其是 Axios 时，如果路由末尾有尾随 /，这会导致请求 301。删除尾随斜杠后，一切正常。

所以这条路线：

return this.url + 'job_title_names/'

变成这样：

return this.url + 'job_title_names'

Vue-select 组件的混合内容

Mixed Content on Vue-select Component

laravel

vue.js

vuejs2

vue-component

vue-select