Vue-select 组件上的混合内容答案

【问题标题】：Mixed Content on Vue-select ComponentVue-select 组件上的混合内容
【发布时间】：2020-06-20 18:06:26
【问题描述】：

这有点奇怪。

在我的本地开发环境中，这可以完美运行，但是一旦我使用临时服务器或实时服务器 - 事情就不会那么顺利了。

我正在使用 Vue.js 的 https://vue-select.org/ 组件来根据用户输入提取选项。更改SELECT Textarea时，我会将方法删除并将字符串击落到API并返回与用户输入相对于用户输入的任何结果。然后将其填充到“选项”数组中，选择会动态更新和使用该数组。

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

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

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。我已经对此进行了四次测试并重新编写甚至硬编码 HTTPS 链接，但由于某种原因，该组件一直尝试通过 HTTP 加载请求。

这真的很奇怪，因为它会尝试触发两个请求。一个是 GET，另一个是 POST。 POST 是我的 Axios 脚本应该执行的操作，但由于某些未知原因添加了 GET 请求。如下所示，没有为该组件的 get 请求构建代码。

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

我的环境变量：（.test 是我的开发 tld）。

test is my dev tld
/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 是分配给不同 vue 变量的 APP_API_URL 的值。

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

刀片模板：

@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 工具，我可以看到所有链接都被正确引用，没有一个在它们之前有 HTTP 前缀。

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

我为尝试解决此问题而采取的步骤：

我已成功从 Laravel 方面刷新了所有缓存
我在 Laravel 中返回了变量，可以确认它们返回正确。
我已经重写了大多数变量以确保它们 100% 正确
我检查了软件包版本是否存在冲突，其中没有。

任何帮助将不胜感激。

谢谢

【问题讨论】：

标签： laravel vue.js vuejs2 vue-component vue-select

【解决方案1】：

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

所以这条路线：

return this.url + 'job_title_names/'

变成这样：

return this.url + 'job_title_names'

【讨论】：