1.问题描述

前后端分离项目，通过nginx代理前端代码，浏览器报500 Internal Server Error，查看nginx报错日志问题报错为：

rewrite or internal redirection cycle while redirect to named location "@router", client: 117.136.12.226, server: 127.0.0.1, request: "GET / HTTP/1.1", host: "182.254.242.219:27000"

2.nginx配置(错误)

server {
    
    listen  27001;#默认端口是80，如果端口没被占用可以不用修改
    server_name  182.254.242.219;

    root  usr/local/www/dist;#vue项目的打包后的dist

    location /api/ {
       proxy_pass http://182.254.242.219:27010/; #后端地址    
    }

    location / {
        try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
        index  index.html index.htm;
    }

    #对应上面的@router，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件
    #因此需要rewrite到index.html中，然后交给路由在处理请求资源
    location @router {
        rewrite ^.*$ /index.html last;
    }
	
}

3.解决方法

错误配置：root  usr/local/www/dist;

正确配置： root  /usr/local/www/dist;

 之前进行后端开发的时候，配置成  root  usr/local/www/dist没有问题。这次自己写前端代码，框架用的是vue自动生成的，配置稍有改变，但具体原因还不清楚，记录备忘。