Nginx配置中为Flask后端API路径添加路由匹配例外的问题

兄弟，我太懂你踩的这个坑了！React Router单页应用的Nginx配置很容易把后端API的请求也给“吞”了，咱们一步步把它捋顺。

问题根源 #

你当前的location /规则里，try_files $uri $uri/ /index.html会把所有请求先尝试匹配静态文件，找不到就直接返回React的index.html——这就导致你的/data_service API请求也被Nginx转去返回React入口文件了，自然就出现404/500错误。

正确的配置方案 #

Nginx的location匹配是从上到下优先匹配更精确的规则，所以咱们只需要把后端API的路由规则放在React的前面，让Nginx先处理API请求，剩下的再交给React路由：

# 优先处理后端API请求：匹配所有以/data_service开头的路径
location /data_service {
    proxy_pass http://localhost:8006;
    # 建议加上这些常用的代理头，避免后端获取不到正确的请求信息
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

# 然后处理React单页应用的路由
location / {
    # 确保这里指向你React打包后的静态文件目录
    root /path/to/your/react/build/folder;
    try_files $uri $uri/ /index.html;
}

为什么你之前的尝试没用？ #

你之前写的try_files $uri/data_service /data_service或者alias /data_service都是错误的思路：/data_service是后端API接口，不是静态文件路径，所以不需要找文件或者设置别名，直接把这个路径的请求代理到你的Flask/Gunicorn服务就好。

另外注意：原来的location /里的proxy_pass要删掉！React的静态文件是Nginx直接服务的，不需要再代理到Flask端口，除非你是把React和Flask部署在一起的特殊场景，但大部分单页应用都是Nginx直接托管静态资源，只把API请求代理到后端。

备注：内容来源于stack exchange，提问作者toom