CentOS下Nginx配置Vue+Laravel服务域名绑定后API访问404问题求解

• 端口匹配错误：你直接访问domain.com/api默认走HTTP 80端口（HTTPS走443端口），但你给出的两个server块分别监听3001和8001端口，没有监听默认端口的server块承接请求，自然匹配不到规则返回404。你之前用IP访问正常是因为你主动指定了端口（比如x.x.x.x:3001访问前端、x.x.x.x:8001访问后端），直接用域名访问不会默认匹配非标准端口。
• 路径路由缺失：你要实现domain.com访问前端、domain.com/api访问后端的效果，目前两个独立server块没有配置转发规则，就算都监听80端口，同一个域名+端口下多个server块会冲突，Nginx只会匹配第一个加载的server块。

合并为一个监听80端口的server块做路径分发，原有Laravel的8001端口server块保留仅本地监听即可，Vue的3001端口server块可以直接删除：

server {
    listen 80;
    server_name domain.com; # 替换成你的实际域名
    keepalive_timeout 60;
    index index.html index.php;

    #  Vue前端路由规则
    location / {
        root /var/www/html/app/front/dist;
        try_files $uri $uri/ /index.html; # 解决Vue history模式下刷新页面404的问题
    }

    # Laravel后端API转发规则
    location /api {
        # 如果你的Laravel路由本身已经带有/api前缀，删除下面这行rewrite规则
        rewrite ^/api/(.*)$ /$1 break;
        proxy_pass http://127.0.0.1:8001;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

1. 执行nginx -t检查配置语法是否正确，返回syntax is ok、test is successful再进行下一步
2. 执行systemctl reload nginx重载Nginx配置
3. 确认域名已经正确解析到服务器公网IP
4. 确认服务器安全组、firewalld/iptables已经开放80端口访问权限

如果不想修改现有结构，访问后端接口时直接加端口即可，接口地址改为domain.com:8001/api，前端访问地址用domain.com:3001，不推荐上线使用这种带非标准端口的方式。

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