I'm working with Vue JS using the webpack template, and dev mode.
How can I have part of my server using the HTTPS protocol and other part using HTTP?
I know that to use HTTPS is just add "https: true" to the devServer variable of the file build/webpack.dev.conf.js . Example:
devServer: {
https: true,
// other variables...
}
But when I do that just the HTTPS requests are accepted, no HTTP anymore.
How can I work with both protocols? If it's not possible, is there a VueJS way to redirect an HTTP request to an HTTPS?
It doesn't look totally straightforward to configure multiple entry points on your webpack server. Your best bet is likely to reverse-proxy the http requests using whatever other webserver you have handy. IIS will do this for you, for example. Google "reverse proxy [name-of-your-webserver]" :-)
Related
I am developing a website using Vue.js, and I have implemented HTTPS in my webpage.
Right now the website is basically static, no communications between itself and the backend server.
If I wanted to add features for instance, login, via a backend server which is on the same machine as the frontend server.
Do I need to get another SSL certificate to make to communication between frontend and backend through HTTPS?
Is there any way to make the SSL certificate work on the whole domain?
You have a few options here
Proxy API requests to your backend service
This means that your HTTP server (eg NGINX) uses your built Vue app (eg the dist folder contents) as its document root and creates a reverse proxy for requests to your API service. For example, say you have a backend service running on port 3000
location /api {
proxy_pass http://localhost:3000/
}
Then your Vue app can make requests to /api/whatever.
During development, you can mirror this using the devServer.proxy setting in vue.config.js
module.exports = {
devServer: {
proxy: {
"^/api": "http://localhost:3000/"
}
}
}
Use a wildcard certificate and run your backend service at a sub-domain, eg
Frontend - https://example.com
Backend - https://api.example.com
Just get two SSL certificates for your two domains. They're free after all
Keep in mind, options #2 and #3 will need you to enable CORS support whereas that is not required for option #1.
I am trying to serve Vue application over HTTPS instead of HTTP.
I have tried to add --https flag to webpack-dev-server and add https: true in build/webpack.dev.cong.js but when I try to open the app in the browser it crashes with the following error:
[DEP0066] DeprecationWarning: OutgoingMessage.prototype._headers is deprecated
internal/buffer.js:945
class FastBuffer extends Uint8Array {}
^
RangeError: Invalid typed array length: -4095
at new Uint8Array (<anonymous>)
Is there something that I missed or what is the solution for this?
And if the HTTPS properly configured to webpack devServer, after building the project it would work the same when served with web server like nginx or I have to add some reverse proxying?
If you want to do this on your local machine, then you are going to want to use NGINX to serve up the HTTPS-traffic and use it to reverse proxy to whatever port on your local machine that you mount your webpack-dev-server. There might be a way to get Webpack to do this, but it wasn't designed to do this.
I've setup the standard GCP load balancer to point to my instance group. It talks over the same port on the instance. I would like to redirect http to https. I would normally do this in nginx or apache on the instance but that won't work since its https already from the load balancer.
Is there a way to rewrite the url similar to if I was using nginx and apache to load balance in GCP's Load Balancer? or should I forward http and https to the instance and have the instance handle the rewrite as I normally would. I'm new to GCP thanks in advance.
You can set it up the same way as Nginx does. When you see traffic on a port which is not https, you redirect it to HTTPs.
To do this, you can use X-Forwarded-Proto header which contains the protocol using which the traffic came in. On your server, you can simply look for traffic that has http header and upgrade that request to HTTPS.
Most commonly used way is to use 301 redirect, but that is not a great practice. One should use HTTP 426 upgrade request header.
Read more: Is HTTP status code 426 Upgrade Required only meant signal an upgrade to a secure channel is required?
RFC doc: https://www.rfc-editor.org/rfc/rfc2616#section-14.42
Is there any way to require the HTTPS redirect?
Force SSL package causes a loop...
I am using a demeteorized app on azure...have seen solutions for nginx etc but nothing mentioning this
The force SSL package won't work for an environment where the server is behind a load balancer that redirects to the server as HTTP. As far as the server is concerned, all traffic is HTTP, not HTTPS, so you'll end up with an infinite loop.
In some cases you can look at the headers to see if the request has been downgraded to HTTP locally, but it doesn't always work as expected.
I ended up removing the force SSL package, then used JavaScript in the page template to see if the protocol was HTTP, then redirect the user to HTTPS to prevent the issue.
Example
<script>
if (location.protocol.toLowerCase() === 'http:') {
window.location.href = 'https://example.com' +
(location.pathname ? location.pathname : '') +
(location.search ? location.search : '');
}
</script>
Currently we are using the default wirecloud template. But sinde we enabled SSL and redirect every request to the ssl port I would love to change the urls of static ressources to start with https to avoid mixed content warnings.
Is there a simple way to change the urls to always start wit hhttps instead of http?
That's done automatically, except if WireCloud is behind a proxy (so requests comes using HTTP instead of HTTPS). In those cases you can force WireCloud to use https links by adding this line into the settings.py file:
FORCE_PROTO = "https"
See this link for more info.