How to proxy custom domains to vuejs app? - vue.js

I want to proxy multiple domains to my vuejs app.
I have a VueJS application, with the following route: https://app.pingr.io/status/{id}.
What I want to do is to allow users to redirect their domains to this route. So, imagine we have a https://status.some-domain.com host, which is redirected using CNAME to https://app.pingr.io/status/status.some-domain.com.
I really can't figure out the nginx configuration for this.
What I have right now:
server {
listen 80 default_server;
server_name _;
location / {
#resolver 127.0.0.1 [::1];
#resolver 8.8.8.8;
proxy_pass https://app.pingr.io/status/test/;
}
location /js/ {
proxy_pass https://app.pingr.io/js/;
proxy_ssl_server_name on;
proxy_set_header Accept-Encoding "";
}
location /css/ {
proxy_pass https://app.pingr.io/css/;
proxy_set_header Accept-Encoding "";
}
}
Before passing $host variable to proxy_pass at first I'm trying to just proxy to /status/test with working js/css/images.
I managed to get js/css work, however instead of getting the content of /status/test route, I get redirected to the home page. I displayed routes in router.beforeEach, so I can see that the first route I'm being redirected to is home route.
I was trying different configurations, like including proxy_set_header host and other stuff, which actually broke the whole thing even more.
So what is the right way to do this? Once again, users should be able to redirect their domains to my vuejs route and pass their domain to a part of this route. The domain should be rewritten, so that it looks like the page belongs to their server/domain.

Related

Error on Auth0 redirect urls (redirect URI is wrong) with Nginx reverse proxy

We are using Auth0 for authentication and NGINX for reverse proxy.
com.auth0.AuthenticationController is used at backend for the login and we updated all the setting at auth0 application and added these urls (http://localhost:8888, http://localhost:9999 ) to allowed callback urls list.
Nginx reverse proxy configuration
server {
listen 8888;
server_name localhost;
location = /login {
proxy_pass http://localhost:9999/login;
}
}
As per the above code when nginx gets login request it redirects it to http://localhost:9999/login
The service running at localhost:9999 is trying to get com.auth0.Token using the auth code
authenticationController.handle(request, response);
but following exception is thrown.
The redirect URI is wrong. You sent http://localhost:9999, and we expected http://localhost:8888
Note: It is telling us that while creating the secret code at Auth0 we have provided http://localhost:8888 as redirect_uri, but trying to access the token using http://localhost:9999
How to tell the Auth0 server that it is proxied url?
server {
listen 8888;
server_name localhost;
location = /login {
proxy_set_header Host $http_host;
proxy_pass http://localhost:9999/login;
}
}
The code started working when we added the following line to nginx configuration.
proxy_set_header Host $http_host;

Nginx - proxy_pass to google storage bucket static page VueJS sub paths cause 404 error, VueJS router not kicking in

I'm hosting VueJS at google cloud storage bucket, app works only when using domain name without subpath: www.domain.com when using URL like: www.domain.com/sub/path I'm getting 404 error as it seem that NGINX is looking for this path in the bucket instead of let VueJS router take over.
I tried to follow older thread but in my case would not help.
Any ideas how to fix this?
location = / {
proxy_pass https://gcs/mygoogle-cloud-bucket/main.html;
proxy_set_header Host storage.googleapis.com;
}
location / {
rewrite /(.*) /$1 break;
proxy_pass https://gcs/mygoogle-cloud-bucket/$1$is_args$args;
proxy_redirect off;
index main.html;
proxy_set_header Host storage.googleapis.com;
}
It seems like what you need to do is to create a Static Website using Cloud Storage and VueJS.
With this bieng the case, there are a few things that needs to be clarified:
Cloud Storage doesn't support HTTPs, so yo uneed to use a Load Balancer.
Make sure the objects in your bucket are public.
Build the Vue project With Relative Path.
It is also recomended to set the special pages, but this is not necessary.
Set up your load balancer and the SSL certificate as it is mentioned here.
Configure routing rules.
Make sure you have connected your custom domain to your load balancer
This should get you going with your site. If you would like to check a worknig example, you can take a look at this one.
Your code should look something like:
location / {
rewrite /$ $uri$index_name;
proxy_set_header Host storage.googleapis.com;
proxy_pass https://gs/$bucket_name$uri;
proxy_http_version 1.1;
proxy_set_header Connection "";
}

Nuxt.js app behind nginx reverse-proxy loading multiple pages at once

I've a nuxt.js app behind nginx reverse proxy. The nginx conf file looks like this:
server {
listen 80;
# Match *.lvh.me
server_name ~^(?<user>.+)\.lvh\.me$;
location / {
proxy_pass http://localhost:8080/sites/$user$uri$is_args$args;
}
location ~* \.(?:js|css|jpg|jpeg|gif|png|ico|cur|svg)$ {
proxy_pass http://localhost:8080;
}
}
As you can see I'm mapping all my site subdomains to a specific path on my site and it is working fine. I'm also mapping all assets to be loaded from the root (because otherwise it throws a 404 error).
The only issue I'm facing is the whenever I visit a subdomain e.g subdomain.lvh.me it loads two pages on top of each other, the original page from subdomain root (which is expected) but also the page from the main domain root i.e. lvh.me (which is not expected).
Can you please checkout my conf file to see if I'm doing anything wrong here?
So I've encountered this issue and what I did to fix it was to not rely on Nginx's root nor proxy_pass. Instead, I used a location block with an alias and a try_files inside like so:
location ^~ / {
alias /path/to/dist;
try_files $uri $uri/ /index.html = 404;
}

Nginx reverse proxy didnt load site correctly

I have an nginx configuration which listens to any subdomain *.mydomain.com,
and I want to use subdomain as variable, to proxy request to other site.
Here is my nginx configuration
server {
listen 80;
server_name "~^(?<subdomain>.*).mydomain.com";
location / {
resolver 1.1.1.1 1.0.0.1 ipv6=off;
proxy_pass http://hosting.mydomain.com/$subdomain/;
proxy_redirect off;
access_log /var/log/nginx/proxy.log;
}
}
As I request the site directly and it loads perfectly
Site placed on AWS S3, and bucket static website address cnamed to mydomain
However, when I try to access via user1.mydomain.com, the page didn't load images, and css
This is the same site
And in browser network panel shows
Difference between direct and proxy access
This issue is made, because I have many sites stored in S3 bucket and located in different folders (the folder name is used as subdomain).
And I want to use a single domain to access all of them via subdomains.
Thanks in advance
You forgot to proxy pass the URI, you're serving user1/index.html for every request, including for JS and CSS requests, it's why all of responses are the same size (2kb, the size of user1/index.html), and it's also why you're getting Uncaught SyntaxError: Unexpected token < in the first line of Enterprise_skeleton.bundle.js because it's returning an HTML document that starts with <!doctype html> instead of the actual JS bundle.
Change
location / {
proxy_pass http://hosting.mydomain.com/$subdomain/;
}
to
location / {
proxy_pass http://hosting.mydomain.com/$subdomain$uri;
}

Laravel routes behind reverse proxy

Ok, so for development purposes, we have a dedicated web server. It's not currently connected directly to the internet, so I've setup an apache reverse proxy on another server, which forwards to the development server.
This way, I can get web access to the server.
The problem is, the routes in Laravel are now being prefixed with the internal server IP address, or the servers computer name.
For example, I go to http://subdomain.test.com but all the routes, generated using the route() helper, are displaying the following url: http://10.47.32.22 and not http://subdomain.test.com.
The reverse proxy is setup as such:
<VirtualHost *:80>
ServerName igateway.somedomain.com
ProxyRequests Off
<Proxy *>
Order deny,allow
Allow from all
</Proxy>
ProxyPass / http://10.47.32.22:80/
ProxyPassReverse / http://10.47.32.22:80/
<Location />
Order allow,deny
Allow from all
</Location>
</VirtualHost>
I have set the actual domain name in config\app.php.
Question
How can I set the default URL to use in routing? I don't want it using the internal addresses, because that defeats the point of the reverse proxy.
I've tried enclosing all my routes in a Route::group(['domain' ... group, which doesn't work either.
I ran into the same (or similar problem), when a Laravel 5 application was not aware of being behind an SSL load-balancer.
I have the following design:
client talks to an SSL load balancer over HTTPS
SSL load balancer talks to a back-end server over HTTP
That, however, causes all the URLs in the HTML code to be generated with http:// schema.
The following is a quick'n'dirty workaround to make this work, including the schema (http vs. https):
Place the following code on top of app/Http/routes.php
In latest version of laravel, use web/routes.php
$proxy_url = getenv('PROXY_URL');
$proxy_schema = getenv('PROXY_SCHEMA');
if (!empty($proxy_url)) {
URL::forceRootUrl($proxy_url);
}
if (!empty($proxy_schema)) {
URL::forceSchema($proxy_schema);
}
then add the following line into .env file:
PROXY_URL = http://igateway.somedomain.com
If you also need to change schema in the generated HTML code from http:// to https://, just add the following line as well:
PROXY_SCHEMA = https
In latest version of laravel forceSchema method name has changed to forceScheme and the code above should look like this:
if (!empty($proxy_schema)) {
URL::forceScheme($proxy_schema);
}
Ok, so I got it. Hopefully this will help someone in the future.
It seems like Laravel ignores the url property in the config\app.php file for http requests (it does state it's only for artisan), and it instead uses either HTTP_HOST or SERVER_NAME provided by apache to generate the domain for URLs.
To override this default url, go to your routes.php file and use the following method:
URL::forceRootUrl('http://subdomain.newurl.com');
This will then force the URL generator to use the new url instead of the HTTP_HOST or SERVER_NAME value.
Go to app/Http/Middleware/TrustProxies.php and change the protected variable $proxies like this:
protected $proxies = ['127.0.0.1'];
Just this! Be happy!
Because laravel route is created not from the config/app itself rather than from the server. My solution is adding the proxy_set_header Host to the nginx's config.
server {
listen 80;
server_name my.domain.com;
location / {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header Host my.domain.com;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://127.0.0.1:8000;
}
}
i'm using laravel 8 with nginx docker inside a running nginx on the machine, so yeah it's double nginx
add this code in App\Providers\AppServiceProvider class
if (Str::contains(Config::get('app.url'), 'https://')) {
URL::forceScheme('https');
}
Seems the Laravel have more convinient solution.. Check answer there: How do I configure SSL with Laravel 5 behind a load balancer (ssl_termination)?
Following up #TimeLord's solution:
In latest version of laravel the name for forced schema has changed and now it is:
URL::forceScheme()
I know this topic is old a.f but I've been solving this issue by replacing the following line in my DatabaseSessionHandler.pdf [#Illuminate/Session]:
protected function ipAddress()
{
return $_SERVER['HTTP_X_FORWARDED_FOR'];
// return $this->container->make('request')->ip();
}
Of course you need to migrate the sesssion table first and set up the config
(.env Variable SESSION_DRIVER=database)
For nginx, you don't need to do anything extra in Laravel. The fix can be done at from nginx config;
server {
listen 80;
listen [::]:80 ipv6only=on;
server_name sub.domain.dev;
location / {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header Host sub.domain.dev;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://127.0.0.1:8000;
}
}
Figured out a way that much cleaner and only does exactly what the loadbalancer tells it to, add this function to your RouteServiceProvider
protected function enforceProtocol()
{
if(request()->server->has('HTTP_X_FORWARDED_PROTO')){
URL::forceScheme(request()->server()['HTTP_X_FORWARDED_PROTO']);
}
}
and in the boot section, simple call it like so
public function boot()
{
$this->enforceProtocol();
//other stuff
}