nginx+vue的反向代理,再记录一下,有些参数缺少了真不好使

vue项目可以打包的时候写死一个后端url地址,当然这不是很灵活的,多端部署就要多次打包,所以比一般都是打包没有写死域名的前端文件,然后服务器通过nginx等配置代理到指定的后端接口即可,比如下面是把manager开头的转发到 https://祝您赚大钱.com/manager/下面。


注意几个参数,毕竟鉴权还是要的,jwt可以看我另外的文章:nginx捕获服务器异常并通过location转发到备用服务器的解决方案和一般反向代理设置和JWT验证转发



下面是示例(丢到nginx的配置里面,记得重启一下nginx):

location ^~ /manager
{
    proxy_pass https://祝您赚大钱.com/manager/;
    proxy_set_header Host daogou.server.wei1.top;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header REMOTE-HOST $remote_addr;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection $connection_upgrade;
    proxy_http_version 1.1;
    # proxy_hide_header Upgrade;

    add_header X-Cache $upstream_cache_status;

    #Set Nginx Cache
    
    
    set $static_filezdKZ2BXu 0;
    if ( $uri ~* "\.(gif|png|jpg|css|js|woff|woff2)$" )
    {
    	set $static_filezdKZ2BXu 1;
    	expires 1m;
        }
    if ( $static_filezdKZ2BXu = 0 )
    {
    add_header Cache-Control no-cache;
    }
}


解释指令:

location ^~ /manager:这个指令表示当请求的 URI 以 /manager 开头时,将应用下面的配置块。

proxy_pass https://祝您赚大钱.com/manager/;:这个指令将匹配的请求转发到 https://祝您赚大钱.com/manager/。

proxy_set_header:这些指令用于设置反向代理请求的一些头部信息,包括 Host、X-Real-IP、X-Forwarded-For、REMOTE-HOST、Upgrade、Connection 等。

proxy_http_version 1.1;:这个指令设置反向代理使用 HTTP 1.1 版本。

add_header X-Cache $upstream_cache_status;:这个指令将响应头中添加 X-Cache 字段,用于显示反向代理的缓存状态。


缓存相关的设置:这些设置用于处理静态文件的缓存。对于图片、样式表、脚本等静态文件,将启用缓存,并设置缓存过期时间为 1 分钟。对于其他非静态文件,将设置响应头的 Cache-Control 为 no-cache,即不缓存。

请注意,这只是一个部分配置块,并未包含完整的 Nginx 配置。在实际部署中,您需要确保该配置块在正确的 server 块内,并且整个 Nginx 配置是正确的,没有其他语法错误。在配置生效后,所有请求以 /manager 开头的 URL 将会被代理到 https://祝您赚大钱.com/manager/ 目标服务器,并且根据配置中的缓存规则进行处理。


评论/留言