nginx代理配置问题

nginx部署vue,配置代理时,出了问题

            rewrite ^.+design/?(.*)$ /$1 break;     
            proxy_pass http://localhost:6882;  

http://localhost:8006/design/index  --->http://localhost:6882/index    //客户端地址转服务端地址,这样子是没问题的

http://localhost:8006/design/design/index  --->http://localhost:6882/index   //如果出现两次design,都会被过滤掉,希望只过滤一个design,这个怎么改写
  • 你可以参考下这个问题的回答, 看看是否对你有帮助, 链接: https://ask.csdn.net/questions/762425
  • 这篇博客也不错, 你可以看下nginx - 使用nginx部署vue项目到本地以及代理和负载均衡
  • 除此之外, 这篇博客: 使用nginx反向代理实现vue项目打包部署上线中的 配置nginx 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  •  server {
            listen       9999; # 监听端口
            server_name  localhost; # 域名可以有多个,用空格隔开
    
            #charset koi8-r;
    
            #access_log  logs/host.access.log  main;
    
            location / {
                root   C:\工作\project\client_admin_system\dist;     #站点根目录,即网页文件存放的根目录, 默认主页目录在nginx安装目录的html子目录。 
                index  index.html index.htm;    #目录内的默认打开文件,如果没有匹配到index.html,则搜索index.htm,依次类推
            }
    
            #ssl配置省略
             location /api {
                rewrite  ^.+api/?(.*)$ /$1 break;
                proxy_pass  http://192.168.1.100:7001;    #node api server 即需要代理的IP地址
                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;
             }
    
            #error_page  404              /404.html;    #对错误页面404.html 做了定向配置
    
            # redirect server error pages to the static page /50x.html
            #将服务器错误页面重定向到静态页面/50x.html
            #
            error_page   500 502 503 504  /50x.html;
            location = /50x.html {
                root   html;
            }
        }
    

    注意事项

    • 监听的端口号和监听的名字
      监听的名字是域名或IP地址
    • 打包文件的存放位置
      可以是服务器的html文件夹下,也可以是磁盘的目录地址
    • 设置代理需要重写/api
      因为在开发的时候所有的接口都是以/api开头的,所以在请求代理的时候和proxyTable一样的逻辑,需要rewrite重写。
     在前端发起以api开头的请求(如/api/index),nginx rewrite请求地址转发至8080端口服务,然后node来负责请求处理,重写之后的地址则没有/api(如/index)
    
    • 如果不用rewrite匹配正则重写/api的话,会以下错误:
      在这里插入图片描述
  • 以下回答由chatgpt基于相关博客总结生成:

    我可以为您提供以下解决方案:

    1. 强制缓存:在Vue应用的构建中,由于文件名上带有哈希值,因此可以使用强制缓存来减少网络请求。在http1.0和http1.1版本中,都可以使用不同的响应头字段来实现强制缓存。在http1.0中,使用Expires响应头字段来表示资源的过期时间;在http1.1中,可以通过设置Cache-Control中的max-age属性来表示缓存的资源将在多少秒后过期。

    2. 不能通过路径来访问项目:如果不能通过路径来访问Vue项目,可以将mode属性设置为'history',然后注释掉该属性,这样就可以去掉#,并且将路由模式改为history。

    3. 引入公共配置:为了避免修改每个配置文件,可以通过引入方式来配置Nginx。可以使用vim来编辑文件,并且可以在Nginx的配置中使用include来引入公共配置文件。

    4. 协商缓存服务端配置:可以在服务端通过设置Cache-Control为no-cache或者max-age=0来实现协商缓存。

    5. 常见问题汇总:为了解决常见问题,可以根据具体的错误信息来找到对应的解决方案。例如,在安装Nginx时出现了pcre错误,可以尝试安装相应的依赖库;在启动Nginx时出现了open() "/etc/nginx/mime.types" failed错误,可以检查该文件是否存在等。

    以上是我可以提供的解决方案和具体步骤,希望能够帮助到您。如果您有其他问题或需要更多帮助,请随时告诉我。