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
Related
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
I've setup my .hosts file to:
127.0.0.1 local.mydomain.dk
And then in my nuxt config file i've setup:
server: {
port: 3000, // default: 3000
host: 'local.mydomain.dk' // default: localhost
},
And last but not least, in package.json:
"dev": "nuxt --hostname local.mydomain.dk --port 3000",
However, when running npm run dev, Nuxt still starts up on localhost:3000, and not my custom domain? And if I try going to my custom domain in the browser, I get a message "Site cannot be reached"
Is there anything else to setup Nuxt for running on a local domain ?
Had the same problem. My solution to this issue was to:
Add the following in my etc/hosts file:
127.0.0.1 local.mydomain.dk
Flush DNS (different command in each OS)
Add the following in nuxt.config.js:
server: {
port: 80,
host: '0.0.0.0',
}
Now if you navigate to http://local.mydomain.dk it will work.
With this approach, I noticed that the Nuxt favicon was missing (I don't know if it introduces any other [serious] problems), so I switched to:
server: {
port: 3000,
host: 'http://local.mydomain.dk',
}
This time you will need to navigate to http://local.mydomain.dk:3000 to work.
I tried to connect Telegram Oauth to nuxtjs and I wasted a lot of time trying to open a domain locally because it doesn't accept Ports. So I want to write down the method I did.
Ngnix Stable version dowload and install C:\ngnix folder
Edit C:\ngnix\conf\nginx.conf
Enter My code
worker_processes 1;
events {
worker_connections 1024;
}
http {
map_hash_bucket_size 128;
map $sent_http_content_type $expires {
"text/html" epoch;
"text/html; charset=utf-8" epoch;
default off;
}
server {
listen 80;
server_name quest.localhost;
gzip on;
gzip_types text/plain application/xml text/css application/javascript;
gzip_min_length 1000;
location / {
expires $expires;
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-Proto $scheme;
proxy_read_timeout 1m;
proxy_connect_timeout 1m;
proxy_pass http://localhost:3000; # set the address of the Node.js instance here
}
}
quest.localhost here is the domain I use You can change it yourself.
Enter cmd and run start nginx.exe in C:\ngnix. Also do nginx -s reload against every extimole since you changed the ngnix.conf file
Now let's enter the domain name
Wow it worked
I'm trying to setup a nginx reverse proxy in front of some internal servers with auth_request to protect them from unauthorized users. I have an authentication script running at 192.168.1.101/scripts/auth/user.php which is accessed inside of the /auth block. The problem is that I'd like to use a named location rather than matching URI so that there is no risk of URI collision with the internal service (which I don't control). The following works:
server {
listen 80;
server_name private.domain.com;
location /auth {
proxy_pass http://192.168.1.101/scripts/auth/user.php;
proxy_pass_request_body off;
proxy_set_header Content-Length "";
proxy_set_header X-Original-URI $request_uri;
}
location / {
auth_request /auth;
proxy_pass http://internal.domain.com;
}
}
I'd like to replace the /auth with #auth however when I do nginx throws an error during relad. I've read that the fix is the replace the proxy_pass inside of the auth location with just the IP address however when I do that the auth_request never makes it to the script. Any thoughts on the correct way to proceed with this configuration?
Due some nginx restrictions named locations can't be used for subrequest. You can prevent outside access of auth location with internal config option. Try this config:
location = /scripts/auth/user.php {
internal;
proxy_pass http://192.168.1.101;
proxy_pass_request_body off;
proxy_set_header Content-Length "";
proxy_set_header X-Original-URI $request_uri;
}
location / {
auth_request /scripts/auth/user.php;
proxy_pass http://internal.domain.com;
}
Following the instruction here, my website can display the contents fine.
However, handling the form submission is current a problem.
I have virtual host set up in my environment. Rendering of contents is fine but form submission ends up in a blank page.
My form is at http://mysite.local/contact
My virtual host is http://mysite.local matches to http://localhost:8080/site
My form follows the developer trail:
<#hst.actionURL var="actionUrl"/>
<form id="" class="form" action="${actionUrl}" method="post">
When I click submit, I was redirected to a blank page: http://localhost:8080/contact?r14_r1_r1:u_u_i_d=5641b2fe-10ad-41b2-8f30-06d8a59ff451
Using my custom component, I printed out the serverName and it's "localhost"!
How do I configure it's in the Console so that my server is "mysite.local" instead of "localhost"?
#Override
public void doBeforeRender(final HstRequest request,
final HstResponse response)
throws HstComponentException {
super.doBeforeRender(request, response);
l.info(request.getServerName());
}
Updates:
I've added the node as per Joeren's suggestion.
However it's still not working.
I event removed the "localhost" node that was orginally under hst:hosts >> dev-localhost but it broke the Site site.
I've noticed that "hst:hosts" have hst:defaulthostname set to "localhost".
I haven't dared to make the change because it would be irreversible I thought.
Updates:
My virtual host configuration (nginx) is as follows:
server {
# listen 80;
server_name mysite.local;
location /site/ {
proxy_pass http://localhost:8080/site/;
# include /etc/nginx/proxy_params;
}
location /cms/ {
proxy_pass http://localhost:8080/cms/;
# include /etc/nginx/proxy_params;
}
location / {
proxy_pass http://localhost:8080/site/;
# include /etc/nginx/proxy_params;
}
}
To redirect to the fully qualified domain name you will need to setup the virtual host in the HST configuration tree in the CMS JCR console.
If the mysite.local is a domain on your local machine you can place it in the dev-localhost host group. By creating the following nodes:
hst:hst
+ hst:hosts
+ dev-localhost
+ local
+ mysite
+ hst:root
See the hosts configuration documentation for more background information.
If you have a web server in front like apache make sure you leave the proxypreserve host on, so that the HST can detect the host. See the Apache webserver configuration documentation for more information.
Passing the host name solve the problem! Thanks to Jeroen's comment.
There is no need to update the hst:hosts configurations in the console though.
I've updated my nginx config to as follows:
server {
# listen 80;
server_name mysite.local;
location /site/ {
proxy_pass http://localhost:8080/site/;
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $remote_addr;
}
location /cms/ {
proxy_pass http://localhost:8080/cms/;
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $remote_addr;
}
location / {
proxy_pass http://localhost:8080/site/;
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $remote_addr;
}
}
I want to set up Nginx as a reverse proxy for a https service, because we have a special usecase where we need to "un-https" a connection:
http://nginx_server:8080/myserver ==> https://mysecureservice
But what happens is that the actual https service isn't proxied. Nginx does redirect me to the actual service, so the URL in the browser changes. I want to interact with Nginx as it was the actual service, just without https.
This is what I have:
server {
listen 0.0.0.0:8080 default_server;
location /myserver {
proxy_pass https://myserver/;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $remote_addr;
proxy_set_header Host $host;
}
}
You have to use the proxy_redirect to handle the redirection.
Sets the text that should be changed in the “Location” and “Refresh” header fields of a
proxied server response. Suppose a proxied server returned the header field
“Location:https://myserver/uri/”. The directive
will rewrite this string to “Location: http://nginx_server:8080/uri/”.
Example:
proxy_redirect https://myserver/ http://nginx_server:8080/;
Source: http://nginx.org/en/docs/http/ngx_http_proxy_module.html#proxy_redirect
You can setup nginx like this if you do not want the server to do redirects:
server
{
listen 80;
server_name YOUR.OWN.DOMAIN.URL;
location / {
proxy_pass http://THE.SITE.URL.YOU.WANT.TO.DELEGAGE/;
proxy_redirect off;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}
For me, this config was sufficient:
events {
}
http {
server {
location / {
resolver 8.8.8.8;
proxy_pass https://www.example.com$request_uri;
}
}
}
(Note that the resolver directive has nothing to do with the problem in the OP, I just needed it to be able to proxy an external domain such as example.com)
The problem for me was just that I was missing the www. in www.example.com. In the Firefox developer's console, I could see the GET request to localhost coming back with a 301, and so I thought that NGINX was issuing 301s instead of just mirroring example.com. Not so: in fact the problem was that example.com was returning 301s to redirect to www.example.com, NGINX was dutifully mirroring those 301s, and then Firefox "changed the URL" (followed the redirect) straight from localhost to www.example.com.
I was having a similar issue. In my case, I was able to resolve the issue by added a trailing slash to the proxy_pass URL:
before
server {
location / {
proxy_pass http://example.com/path/to/some/folder;
}
}
after
server {
location / {
# added trailing slash
proxy_pass http://example.com/path/to/some/folder/;
}
}