это немного странно.
В моей локальной среде разработки это работает отлично, но как только я go на промежуточном или живом сервере - все не так гладко go .
Я использую компонент https://vue-select.org/ для Vue. js, чтобы просмотреть параметры, основанные на вводе пользователем. Когда текстовая область выбора изменяется, я отменяю метод и запускаю строку для API и извлекаю все результаты, относящиеся к пользовательскому вводу. Затем он заполняется в массив 'options', который select динамически обновляет и использует.
Ссылка 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.
Это действительно странно, потому что он пытается запустить два запроса. Один - ПОЛУЧЕНИЕ, а другой - ПОЧТА. POST - это то, что должен делать мой скрипт Ax ios, но запрос GET добавляется по неизвестной причине. Как вы увидите ниже, для этого запроса нет встроенного кода для запроса на получение.
На этом я покончил с этим. Вот некоторая информация, касающаяся моих компонентов и ссылок на элементы:
Мои переменные env: (.test - мой dev tld).
- test - это мой dev tld
- / api / - это то, что большинство моих топоров ios запрашивает go через.
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>
Шаблон блейда:
@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% правильно
- Я проверил версии пакетов, чтобы увидеть, есть ли конфликты, которых нет.
Любая помощь будет принята с благодарностью.
Спасибо вы