如何通过Nginx配置将POST请求重定向至Vue单页应用？

针对你本地通过vue.config.js中devServer配置实现的POST请求重定向逻辑，部署到服务器后可以通过以下Nginx配置实现相同效果：

方案1：和本地逻辑一致（POST重定向为GET） #

在Vue应用对应的Nginx server配置块中，添加精确匹配根路径的规则：

server {
    listen 80;
    server_name your-domain.com; # 替换为你的实际域名
    root /path/to/your/vue/dist; # 替换为Vue打包后dist目录的绝对路径

    # 处理根路径的POST请求，重定向为GET方式访问首页
    location = / {
        if ($request_method = POST) {
            return 302 /;
        }
        # SPA常规路由处理，避免刷新页面出现404
        try_files $uri $uri/ /index.html;
    }

    # 静态资源缓存配置（可选优化）
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}

方案2：直接返回SPA入口文件（无跳转） #

如果不想触发浏览器跳转，可让Nginx直接对根路径的POST请求返回index.html，同样解决405问题：

server {
    # 同上方基础配置...

    location = / {
        if ($request_method = POST) {
            try_files $uri /index.html;
        }
        try_files $uri $uri/ /index.html;
    }

    # 静态资源配置...
}

让配置生效 #

修改完Nginx配置后，执行以下命令重载配置（无需重启服务）：

sudo nginx -s reload

内容的提问来源于stack exchange，提问作者stor314