nginx 给vue项目添加请求头

转载

jimoshalengzhou 2024-09-16 19:43:53

文章标签 nginx 给vue项目添加请求头 nginx 服务器 github Nginx 文章分类 运维

1.finalShell

部署的服务器是阿里云买的,使用finalShell根据账号秘密链接服务器即可

nginx 给vue项目添加请求头_github

2.配置文件抽离

找到/user/local/nginx/conf/下面的nginx.conf文件进行配置,这里单独新建一个finace.conf文件,配置后再导入到nginx.conf文件,便于管理

nginx 给vue项目添加请求头_github_02

nginx 给vue项目添加请求头_github_03

3.静态资源入口配置-代理配置

server {
    listen 8081;
    server_name 127.0.0.1;
    
    location / {
	   root /www;//静态资源位置,位于根目录下的www文件夹,项目build后dist文件里的东西直接搞里头
	   index index.html index.htm;
	   try_files $uri $uri/ /index.html; 
    }
	
	//对以/finance-web/开头的URL的请求被代理到http://127.0.0.1:8088/finace-web/
	location /finace-web/ {
	   proxy_pass http://127.0.0.1:8088/finace-web/;
	   proxy_headers_hash_max_size 51200;
	   proxy_headers_hash_bucket_size 6400; 
	   proxy_redirect off;
	   proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
	   proxy_set_header Host $http_host;
	   proxy_set_header X-Real-IP $remote_addr;
	   proxy_set_header X-Forwarded-For $remote_addr;
	   proxy_set_header X-Nginx_Proxy true;
	}
	  
}

这个Nginx服务器配置设置了一个监听端口为8081的服务器，服务器名称设置为127.0.0.1。它包含两个主要的location块：

用于提供静态文件的位置（/）：

对根URL的请求从/www目录提供服务。
如果找不到文件，则尝试提供index.html或index.htm。
如果找不到这些文件，则提供/index.html。
用于代理请求到后端服务器的位置（/finance-web/）：

对以/finance-web/开头的URL的请求被代理到http://127.0.0.1:8088/finace-web/。(前后端部署在同一个服务器)
它设置了各种代理头，如X-Forwarded-For、Host、X-Real-IP和X-Nginx_Proxy，将它们设置为适合后端服务器的值。

总结一下，这个配置允许Nginx从一个目录提供静态文件服务，同时将特定路径的请求代理到另一个服务器。在修改配置后，请确保重新加载Nginx。

输入nginx -h查看重启命令

nginx 给vue项目添加请求头_github_04