nginx常见bug汇总

1. 前端路由和后端路由冲突

初识问题

假设在nginx项目目录下有个/vue的文件夹，同时我也配置了一个/vue的vue项目路由服务。
那么此时此刻，我浏览器输入localhost:8080/vue浏览器会显示vue文件夹下的静态网页呢，还是显示配置好的vue项目呢？

nginx配置如下

location / {
    # 在html目录下有vue文件夹，vue文件夹下有index.html
    root   D:\nginx\nginx-1.20.0\html;
    index  index.html index.htm;
    autoindex on;       #开启nginx目录浏览功能
    autoindex_exact_size off;   #文件大小从KB开始显示
    charset utf-8;          #显示中文
}
# 写我们的router路由/vue
location /vue{
    // alias后面写项目所在目录
    alias D:/nginx/nginx-1.20.0/html/dist;
    charset utf-8;          #显示中文
}

答案

显示vue项目，忽略/vue下的静态网页

因为路由的优先级比文件夹更高

提出新问题

好了，假设我把上面的vue文件夹改下名字，就叫vuexx的文件夹。请问浏览器访问localhost:8080/vuexx，能访问到下面的index.html嘛

问题答案

不能！浏览器会显示404没找到资源，现在我们先保留这个疑问，进行进一步测试。我们对vuexx文件夹重命名mvue，访问localhost:8080/mvue发现竟然可以访问index.html静态网页了。具体为什么会这样呢？请看下面的算法解读

nginx路由匹配算法

对于nginx这个迷惑行为：本人猜测底层设计逻辑如下，首先根据用户访问的路由优先和服务器（非静态资源）所在路由进行开头正则匹配，如果开头能匹配上，那么就锁定在服务端进行路由查找，进而忽略静态资源路由（也就是文件夹）。如果用户访问路由和服务器所在的所有路由开头都匹配不上，那么nginx会直接认定在静态资源中查找路由，从而忽略在服务端查找相关的路由服务

一般地，静态资源路由被称之为前端路由，服务端资源路由被称之为后端路由

这样就能很好的解释为什么/vue可以访问vue项目，/vuess不能访问静态的资源网页

因为道理很简单，用户访问的/vuess和服务器的路由/vue开头匹配上了，nginx会直接认定在服务器路由查找，忽略在静态资源中查找了，当然服务端可没有这个路由所以即使静态资源有/vuess这个文件夹，也是徒劳的

2.nginx只识别/

初识问题

我们有些时候直接从文件资源管理器复制的文件夹路径（如：D://xx/yy）在nginx配置上不生效，怎么访问都是404（没有找到资源）

原理解读

在nginx中，它不支持\，只支持/

# 写我们的路由暗号/vue
location /vue{
    # alias后面写项目所在目录 xxxxxxx一定要注意，不能写成D:\nginx\nginx-1.20.0\html\dist，要写成斜杠/形式，否则会404
    alias D:/nginx/nginx-1.20.0/html/dist;
    charset utf-8;          #显示中文
}

写成\会出错

3.代理不生效

初识问题

明明设置了代理，代理缺不生效

问题解决

• 路由写成/xxx/不要写成/xxx（不这么写有时候会出问题，取决于后端）
• 代理地址后面没有加/（写成http://xxx.cn是不行的，要写成http://xxx.cn/）
• 访问地址url中没有加/api【取决于你配置的代理路由】

配置实例

location /api/{
    proxy_pass  http://121.36.94.221:6600/;
    index  index.html index.htm;
}
		
location /info/{
    proxy_pass  http://ckk.xiaoandcai.cn/;
    index  index.html index.htm;
}

还有一种情况代理不成功是，后端把接口关闭了（…）

4.错误日志中报乱码

初识问题

我们在错误日志中可以看到乱码了，怎么启动nginx都是报乱码的错误

问题解决

你可能用记事本打开配置文件并修改配置了，记住你是不能用记事本去编辑这个配置文件的。如果你想编辑它，请百度下载notpadd++。

如果你现在已经出现了乱码错误，请另存为utf-8编码就可以了（需要下载notepadd++，点击菜单编码进行转换）

原理分析

记事本会默认把文件修改成带BOM的UTF-8编码，可我们源文件的编码格式是普通UTF-8编码，所以肯定不行

5.总是显示跨域错误

初识问题

我们总是会发现跨域问题，我们明明设置跨域了，还是不行

问题解决

每个路由都需要添加跨域（必须每个都设置）

location / {
    root   html;
    index  index.html index.htm;
    autoindex on;       #开启nginx目录浏览功能
    autoindex_exact_size off;   #文件大小从KB开始显示
    charset utf-8;          #显示中文
    add_header 'Access-Control-Allow-Origin' '*'; #允许来自所有的访问地址
    add_header 'Access-Control-Allow-Credentials' 'true';
    add_header 'Access-Control-Allow-Methods' 'GET, PUT, POST, DELETE, OPTIONS'; #支持请求方式
    add_header 'Access-Control-Allow-Headers' 'Content-Type,*';
}

location /vue{
    alias D:/nginx/nginx-1.20.0/html/dist;
    charset utf-8;          #显示中文
    add_header 'Access-Control-Allow-Origin' '*'; #允许来自所有的访问地址
    add_header 'Access-Control-Allow-Credentials' 'true';
    add_header 'Access-Control-Allow-Methods' 'GET, PUT, POST, DELETE, OPTIONS'; #支持请求方式
    add_header 'Access-Control-Allow-Headers' 'Content-Type,*';
}

location /api/{
    proxy_pass  http://121.36.94.221:6600/;
    index  index.html index.htm;
    add_header 'Access-Control-Allow-Origin' '*'; #允许来自所有的访问地址
    add_header 'Access-Control-Allow-Credentials' 'true';
    add_header 'Access-Control-Allow-Methods' 'GET, PUT, POST, DELETE, OPTIONS'; #支持请求方式
    add_header 'Access-Control-Allow-Headers' 'Content-Type,*';
}

location /info/{
    proxy_pass  http://ckk.xiaoandcai.cn/;
    index  index.html index.htm;
    add_header 'Access-Control-Allow-Origin' '*'; #允许来自所有的访问地址
    add_header 'Access-Control-Allow-Credentials' 'true';
    add_header 'Access-Control-Allow-Methods' 'GET, PUT, POST, DELETE, OPTIONS'; #支持请求方式
    add_header 'Access-Control-Allow-Headers' 'Content-Type,*';
}

原理分析

nginx路由是并联的，需要分别设置，目前博主还没有找到全局中间件的写法