Mixed Content on Vue-select Component

Question

this is a bit of a weird one.

On my local development environment, this works perfectly, but once I go on a staging or live server - things don't go as smooth.

I am using the https://vue-select.org/ component for Vue.js to pull through options based on user input. When the select textarea is changed, I debounce the method and fire the string off to an API and pull back any results that are relative to the user's input. This then gets populated into an 'options' array which the select dynamically updates and uses.

The API link is specified using a variable from my .env file. On my local environment using Laravel Valet, this works fine.

When the site gets switched over to a live server, things get interesting. When I try and input a value into the select field, I get this result:

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.

Now, you would assume that this was because the request is being loaded over HTTP, not HTTPS. This is the weird part. Nowhere hardcoded, or defined as a variable is there HTTP requests, only HTTPS. I've quadruple tested this and re-written and even hard-coded HTTPS links but for some reason, the component keeps trying to load the request over HTTP.

It's really odd because it tries to fire two requests. One is a GET and the other is a POST. The POST is what my Axios script should be doing, but the GET request gets added for some unknown reason. There is no code built for a get request on this component as you will see below.

I'm at my witts end with this. Here's some information regarding my components and element references:

My env variables: (.test is my dev tld).

1. test is my dev tld
2. /api/ is what most of my axios requests go through.

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

My input:

<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>

My methods:

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),

Computed:

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

My component reference:

1. apiurl is the value of APP_API_URL assigned to a different vue variable.

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

Blade template:

@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

Using Vue tools, I can see that all the links are being referenced correctly, not one has HTTP prefixed before them.

I am running Nginx on my local environment, but Apache is running on my server. I'm not sure if that could help with some diagnosis?

Steps I've taken to try and solve this:

• I have flushed all cache from the Laravel side of things successfully
• I have returned the variables in Laravel and can confirm they return correctly.
• I have re-written most variables to ensure that they're 100% correct
• I have checked package versions to see if there are conflicts, of which there are not.

Any help would be greatly appreciated.

Thank you

Answer 1

I fixed this by double-checking my routes. When working with APIs and specifically Axios in Laravel, if you have a trailing / at the end of the route, this causes the request to 301. After removing the trailing slash, everything worked as it should.

So this route:

return this.url + 'job_title_names/'

Becomes this:

return this.url + 'job_title_names'