Invalid Host header Vue3 - vue.js

Just uploaded project files and configured nginx. Everything seems working fine without any errors. However, whenever I visit the domain I see the message 'Invalid Host header'. Followed by many solutions with vue.config.js file, none of them did a trick. The file is created in the same root level with package.json and src folder. Here's how it looks:
module.exports = {
devServer: {
disableHostCheck: true
}
};
Also, tried this solution:
devServer: {
allowedHosts: [
'yourdomain.com'
]
}
Here's the part from the /sites-available file
server {
location / {
proxy_pass http://localhost:8080;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}

For some reasons the project always been running on 8081 port, just had to check logs more carefully. Updating proxy_pass solved it

Related

How to configure Vite dev server for running through a port proxy path?

I'm trying to use Vite dev server in a cloud-based development environment where I can serve on and connect to ports, but need to access them through a proxy path.
Instead of http://localhost:3000/index.html I would visit e.g. https://my.cool.example.com/proxy/3000/index.html. Under the hood, the cloud service translates the URL and proxies the connection through: So to Vite it looks like I'm just requesting /index.html.
...But the various configs I've tried in vite.config.js haven't got this working properly yet:
Setting base as suggested in this answer complains "The server is configured with a public base URL of /proxy/3000/"
Several other unsuccessful experiments with server.base, proxy, publicPath and similar
How can I tell Vite that the client and assets should set a path prefix on requests, but the server can serve from root?
My solution to fix this problem was to make many stuff on reverse proxy inside nginx on filename.conf file inside your domain conf you need to set something like that
location /admin {
include /etc/nginx/includes/proxy.conf;
proxy_pass https://your-service:8081;
}
location ^~ /#vite {
include /etc/nginx/includes/proxy.conf;
proxy_pass https://your-service:8081;
}
location /__vite_ping {
include /etc/nginx/includes/proxy.conf;
proxy_pass https://your-service:8081;
}
location /src {
include /etc/nginx/includes/proxy.conf;
proxy_pass https://your-service:8081;
}
location /node_modules {
include /etc/nginx/includes/proxy.conf;
proxy_pass https://your-service:8081;
}
proxy.conf file look in this way
xy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_buffering off;
proxy_request_buffering off;
proxy_http_version 1.1;
proxy_intercept_errors on;
Inside of your vite.config you must do something like that
server: {
https: true,
host: "0.0.0.0",
port: 8081,
secure: false,
strictPort: true,
hmr: {
port: 8081,
host: "localhost",
},
},
the important think was to the hrm value to overwrite host and the port need to be the same that you are exposing on docker
service vaues of docker-compose.yml
ports:
- '8081:8081'
on the index.html you must update the script src path
From < script type="module" src="/src/main.js" >
To < script type="module" src="https://localhost:8081/src/main.js" >
I had the exactly same problem
the documentation say that there are more options of proxy on https://github.com/http-party/node-http-proxy#options
https://vitejs.dev/config/#server-proxy

Nginx not redirecting on named route

I'm trying to setup a reverse proxy to a sentry relay using Nginx. Config file as follows:
events {
worker_connections 768;
}
http {
server {
listen 0.0.0.0:80;
location /sentry-relay {
proxy_pass http://127.0.0.1:3001;
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Host $server_name;
}
}
}
Browsing directly to the relay server on port 3001 works fine:
However using the location path set in Nginx fails:
I've also put the redirect onto the default path: location / and it works fine. Why won't this custom path redirect properly?
I worked it out.
Nginx will append the location prefix to the proxy server request unless this prefix is replaced.
Thus to fix I changed:
proxy_pass http://127.0.0.1:3001;
to
proxy_pass http://127.0.0.1:3001/;
The extra slash is used to replace the sentry-relay path.

Problem express with nginx reverse proxy, not send static file

Nginx when I ask for my static file always returns 404, but with I understand what the reason is, if I'm wrong something that surely is so you can explain to me why it was wrong:
here are the configuration files:
default.conf
upstream apps {
server webapi:9000 fail_timeout=10s max_fails=5;
}
server {
listen 80 default_server;
large_client_header_buffers 4 16k;
location #apphost {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_set_header X-NginX-Proxy true;
proxy_pass http://apps;
proxy_redirect off;
}
}
Following two articles helped me:
.Net Core 3.0 Nginx not serving static files
https://docs.nginx.com/nginx/admin-guide/web-server/serving-static-content/
I added following two blocks under my server block:
location /assets/ {
}
location ~ \.(css|js|lib|png) {
root /var/apps/dev/myapp/wwwroot;
}

troubleshooting application behind nginx reverse proxy, as POST/PUT requests are replied with Error 400 (Bad Request)

I'm trying to host my Angular/ASP.net core 3.1 application on linux for the first time.
Nginx stands on the port 80 and serves the static files and acts as a reverse proxy for the api part which will be passed to the .NET/kestrel server.
The problem is that I systematically get a 400 status code error (Bad Request) on any web API request containing a body, like POST & PUT, but GET is ok.
I added some logs through a middleware, just to see if I can get the requests. Basically, something like:
app.Use(async (context, next) => {
context.Request.EnableBuffering();
string reqBody;
using (var reader = new StreamReader(context.Request.Body))
{
reqBody = await reader.ReadToEndAsync();
context.Request.Body.Seek(0, SeekOrigin.Begin);
ms_oLogger.Debug($"Incoming request: METHOD={context.Request.Method} PATH={context.Request.Path} BODY=\"{reqBody}\"");
}
await next();
});
This just loggs stuff for GET requests, but nothing appears for the problematic PUT/POST requests... Can I conclude that this is only a nginx problem?
I also enabled the logs on nginx for the given "/api" location, but I can not tell what happens... How can I know which tier has generated the 400 status code?
EDIT1: I started a blank new project just with a poor Web API project containing one GET and one POST method just to check if there was something wrong with my application, but I still get the problem.
So I set up a new ubuntu server (this time, ubuntu server instead of desktop version) and now it works!!!
I compared configuration etc... but could not figure out what was wrong!....
But my initial question is still valid: how can I troubleshoot where the problem comes from?
EDIT2: This is my default.conf:
server {
listen 80 default_server;
listen [::]:80 default_server;
root /var/www/html;
index index.html index.htm index.nginx-debian.html;
server_name _;
location / {
try_files $uri $uri/ =404;
}
location /fusion {
root /opt/fichet/WebUI/NgApp;
}
location /fusion/api {
proxy_pass http://localhost:5000/api;
error_log /var/log/nginx/fusion_error_logs.log debug;
access_log /var/log/nginx/fusion_access.log;
proxy_http_version 1.1;
proxy_cache_bypass $http_upgrade;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Forwarded-Host $host;
proxy_set_header X-Forwarded-Port $server_port;
}
}
It seems that no firewall is enabled ("sudo ufw status verbose" tells us that it is "inactive")
Remove these lines from your nginx config.
proxy_cache_bypass $http_upgrade;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
These headers are used for WebSocket connections, and shouldn't be present for non-websocket requests. My guess is your upstream server doesn't mind them for GET requests but does for POST/PUT, for some reason.
If you are not using websockets, you can leave them removed.
If you are using websockets, you need nginx to add or not these headers based on whether the requests is websockets or not. Something like this should work:
http {
map $http_upgrade $connection_upgrade {
default upgrade;
'' close;
}
server {
...
location /fusion/api {
proxy_pass ...
...
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection $connection_upgrade;
}
}
See here for more info.

Running Apache Zeppelin with nginx as reverse proxy

In our current architecture we have two apache front servers, in front of them, we have an nginx load balancer. And in front of that an nginx reverse proxy.
My problem is that i'm trying to run Apache Zeppelin through the reverse proxy, and i'm having some problems with the websockets.
I get an error like this : 400 HTTP method GET is not supported by this URL
And here is a screenshot of what the Chrome's Networks tab shows :
I add my reverse proxy config for Zeppelin:
error_log /var/log/nginx/nginx_error.log warn;
server {
listen 80;
server_name localhost;
location /zeppelin/ {
proxy_pass http://zeppelin:8080/;
proxy_http_version 1.1;
proxy_set_header Upgrade websocket;
proxy_set_header Connection upgrade;
}
# fallback
location / {
return 301 http://ci.blablalablab.com/app/;
}
}
Zeppelin is running inside a docker container, and i have exposes the 8080 port, its host name is : zeppelin.
If you have any questions on the architecture or so, don't hesitate to ask.
Thank you very much guys !
you can add to your reverse proxy configuration
location /ws { # For websocket support
proxy_pass http://zeppelin:8080/ws;
proxy_http_version 1.1;
proxy_set_header Upgrade websocket;
proxy_set_header Connection upgrade;
proxy_read_timeout 86400;
}
Reference: Zeppelin 0.7 auth docs
After a lot of digging around, i ended up with this configuration :
location /zeppelin/ {
proxy_pass http://zeppelin:8080/;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_set_header X-NginX-Proxy true;
proxy_redirect off;
}
location /zeppelin/ws {
proxy_pass http://zeppelin:8080/ws;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "Upgrade";
}
This is working pretty good, thank you everyone for your efforts ;)