0

这有点奇怪。

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

我正在使用 Vue.js 的https://vue-select.org/组件来根据用户输入提取选项。更改选择的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）。

  1. 测试是我的开发 tld
  2. /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/'
},

我的组件参考：

  1. apiurl是APP_API_URL赋给不同 vue 变量的值。
<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% 正确
  • 我检查了包版本，看看是否存在冲突，其中没有。

任何帮助将不胜感激。

谢谢

4

1 回答 1

1

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

所以这条路线：

return this.url + 'job_title_names/'

变成这样：

return this.url + 'job_title_names'
于 2020-03-09T21:59:55.960 回答