Creating a Vue JS project that utilizes both HTTP and HTTPS URLs for improved security

I'm currently utilizing Vue JS with the webpack template and dev mode. I have a question regarding how to configure my server to allow for both HTTPS and HTTP protocols simultaneously.

I understand that enabling HTTPS can be done by simply adding "https: true" to the devServer variable in the file build/webpack.dev.conf.js. For instance:

devServer: {
    https: true,
    // other variables...
}

However, after implementing this change, only HTTPS requests are being accepted, and HTTP requests are not working. Is there a way to accommodate both protocols concurrently? Alternatively, does VueJS offer a method to redirect an HTTP request to HTTPS?

vue.jshttpsvuejs2webpack-dev-server

Answer №1

Setting up multiple entry points on your webpack server may not be as simple as it seems. One option is to use a reverse-proxy to handle http requests, which can be done easily with other webservers like IIS. You could also search for "reverse proxy [name of your webserver]" for more guidance. Happy configuring!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exception encountered for Internet Explorer when attempting to launch from WebDriver: 405 Method Not Allowed

After trying to launch IE from Webdriver and clicking on save, I encountered a "405 Method not allowed" exception. However, when I manually launched IE and clicked on save, it worked fine. I'm perplexed by this issue. Any ideas as to why it might be ...

jqueryseleniumhttpsselenium-webdriver

The marriage of Vue 2.0 and Rails 5: Shifting from Reactive to Declarative Rendering

As I make my way through the Vue guide with a Rails 5 app, I've noticed that although I am able to update my Vue js object, the DOM doesn't behave as described in the Declarative Rendering section. The data and the DOM are supposed to be linke ...

javascriptjqueryruby-on-railsvue.jsdeclarative

VueJS in collaboration with Quasar framework

Incorporating VueJS with Quasar framework, I created a data table. Here is my implementation: <template> <div class="q-pa-md"> <q-table title="Task List Of The Day" :columns="columns" row-key="name" :pagination ...

jqueryvue.jsdatatablevue-componentquasar-framework

Attempting to modify information in vue.js

I have been facing an issue with overriding data in the App.vue component. It seems that every time I try to update the data in my main.js file, the component still takes the default data. I am working with webpack as well. App.vue <template> & ...

javascriptjquerywebpackvue.js

Vue.js compatibility issue with SelectBoxIt jq plugin causing malfunction

On a page with numerous dynamically generated select boxes, I am looking to incorporate the jQuery selectBoxIt plugin from . Using Vue js, where is the best placement for the following code snippet to connect the plugin with the select elements? $('. ...

javascriptjqueryjquery-pluginsvue.jsselectboxit

The second parameter of the Ajax request is not defined

Having an issue with my Ajax request in Vue.js where the second parameter is logging as undefined in the console. I've been trying to fix this problem but haven't found a solution yet. This is the code snippet for $.ajax(): //$.ajax() to add ag ...

javascriptjqueryajaxvue.js

There is an error message in Vue nextTick: "TypeError: this.method is not a function." The error only appears in my console, but the functionality seems to be working correctly in the browser

I'm experiencing an issue where I encounter an error when accessing a certain component for the second time in my browser. The strange thing is that everything appears to be working fine initially, but the error occurs when I try to perform actions li ...

jquerylaravelvue.jsvuejs2vue-router

Displaying a certain div when clicked within a loop using Vue.js and Laravel

I am currently facing an issue with displaying a hidden div upon click. The problem arises when using a loop to dynamically generate all the divs. Whenever I click the button, it shows all the divs instead of just one specific div on each click. I attempte ...

javascriptjquerylaravelvue.jstoggle

Load Vue: Include jQuery globally for all components

When working with vue-loader single file components, I often need to use jQuery in specific components. To do this, I typically import jQuery like so: import $ from 'jQuery' Is there a way to import jQuery globally, making it available for all ...

jqueryvue.js

What is the best way to save the city name received from geolocation into a variable and then make an AJAX request?

<script> new Vue({ el: '#fad' , data: { data: {}, }, mounted() { var self = this; navigator.geolocation.getCurrentPosition(success, error); function success(position) { var GEOCO ...

javascriptjqueryajaxgoogle-mapsvue.js

Unable to initialize the bootstrap datepicker module

I'm having trouble initializing bootstrap-datepicker from this GitHub repository: https://github.com/uxsolutions/bootstrap-datepicker. I can't seem to get it to work properly or call any methods or events on it. My setup includes Laravel 5.4.7, ...

jquerytwitter-bootstrapdatepickervue.jsbootstrap-datepicker

Learn the process of integrating VueJS with RequireJS

I am attempting to set up VueJS with RequireJS. Currently, I am using the following VueJS library: . Below is my configuration file for require: require.config({ baseUrl : "js", paths : { jquery : "libs/jquery-3.2.1.min", fullcalendar : "libs/ful ...

javascriptjqueryvue.jsrequirejs

Mixed Protocol Error (HTTP/HTTPS)

I'm experiencing a mixed content error on my website, as it is using both http and https protocols. Chrome console displays the following error: Mixed Content: The page at '' was loaded over HTTPS, but requested an insecure XMLHttpReques ...

javascriptjqueryajaxhttphttps

Issue with Bootstrap-vue pagination navigation not functioning correctly (unexpectedly refreshes upon clicking a page)

I recently updated my website's gallery pagination by following a helpful guide. However, I encountered a problem where clicking on a new page number refreshes the entire webpage, unlike the smooth transition shown in the tutorial. This is not the beh ...

javascriptjqueryvue.jspaginationbootstrap-vue