记录两个错误

1

在我部署了一个前端页面到服务器上的nginx后，我访问他报错403.显示没有权限。后来发现403的一个可能原因是因为nginx没有权限访问到/root中的内容。因为我把vue打包的页面直接放到了root目录下。因此报错，只要将这个dist文件放到其他位置即可正常访问了

2

vue部署了路由的话，再部署到nginx上需要为vue的路由专门配置

1
2
3
4
5
location / {
               root html/dist;
               index index.html;
               try_files $uri $uri/ /index.html;#解决页面刷新
       }

同时因为vue的代理服务器只在运行时才有用。因此需要再nginx部署代理服务器。或者再后端解决跨域问题。
这里介绍再nginx解决代理的方法。

1
2
3
4
5
6
7
8
9
10
11
12
location  /api/ {
            # 单个服务
            proxy_pass http://127.0.0.1:5441/;
            # rewrite ^(.*)api(.*)$ $1$2 last;
            # 负载均衡
            # proxy_pass http://yourServers/;
           proxy_redirect off;
           proxy_set_header        X-Real-IP           $remote_addr;
           proxy_set_header        X-Forwarded-For     $proxy_add_x_forwarded_for;
           proxy_set_header        Host                $http_host;
           proxy_set_header        X-NginX-Proxy       true;
        }

你不需要再重写请求路径了，他接收到/api的请求路径时，会自动的转移到proxy_pass并且自动去掉api。