nginx 请求转发配置

Question

使用nginx做代理，用于转发api 和静态资源,前台应用是react 应用，可以正常访问，但在具体的某个功能页面进行刷新时，得到404 。如果不刷新，则没有问题。如果react应用和nginx在部署在一起时，只需要设置

location / 
    {
        try_files $uri /index.html;
    }

即可，现在react应用和nginx是分开部署的。通过proxy_pass 代理过去的。那么我应该如何配置呢？

nginx 配置

server {
    listen 80;
    server_name localhost eoms.xxx.com;
    access_log /var/log/nginx/eoms.access.log;
    location /api/ {
        proxy_set_header Host $host:$server_port;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_pass http://api-eoms/public/index.php/api/;
        client_max_body_size         512m;
        client_body_buffer_size      1024k;
        proxy_connect_timeout        100;
        proxy_send_timeout           100;
        proxy_read_timeout           100;
        fastcgi_read_timeout         180;
        proxy_buffer_size            8k;
        proxy_buffers                128 64k;
        proxy_busy_buffers_size      128k;
        proxy_temp_file_write_size   128k;
    }
    location / {
        proxy_redirect off;
        proxy_set_header Host $host:$server_port;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_pass http://ui-eoms;
    }
}

ps: 使用的docker 部署的。 ui-eoms就是用httpd 部署的react应用。因为react应用只有一个index.html入口文件。所以当请求其他地址时都会出现404

我希望能支持在任一页面刷新都能正常工作.

Answer 1

nginx rewrite 了解下 我就举个例子

location / {
        rewrite /(.*) /index.html#$1;
        proxy_redirect off;
        proxy_set_header Host $host:$server_port;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_pass http://ui-eoms;
    }