Nginx反向代理React服务无法加载样式及路径限制配置问题

你遇到的MIME类型报错核心原因是：静态资源请求转发到后端React应用时路径不匹配，后端Nginx找不到对应静态资源，触发SPA路由回退规则返回了index.html页面，浏览器拿到HTML内容却按照CSS类型解析，因此抛出错误。
另外你当前配置存在三个明显问题：

• 反向代理转发时未处理路径前缀，导致带/web、/app-info前缀的请求直接透传给后端，而后端React应用未配置对应路径前缀的路由和静态资源路径
• sub_filter默认仅替换text/html类型的响应内容，JS/CSS文件内的资源路径未被替换
• 缺少proxy_redirect配置，后端返回的重定向路径未正确替换为对外暴露的前缀

方案一：保留/web路径正常访问，同时仅开放/app-info路径 #

# 仅允许/web下的/app-info路径访问，其余/web路径阻断
location /web/ {
    if ($request_uri !~ ^/web/app-info(/.*)?$) {
        return 403 "Access Denied";
    }
    include /etc/nginx/proxy-options/proxy.conf;
    set $webapp webapp;
    proxy_cache_bypass $http_pragma;
    # 末尾加斜杠，转发时自动去掉/web前缀，后端收到的路径为原始路径不含/web
    proxy_pass http://$webapp/;
    proxy_redirect http://$webapp/ $scheme://$http_host/web/;
    # 覆盖所有需要替换路径的响应类型
    sub_filter_types text/html text/css application/javascript;
    sub_filter 'action="/'  'action="/web/';
    sub_filter 'href="/'  'href="/web/';
    sub_filter 'src="/'  'src="/web/';
    # 替换React内部动态加载用到的publicPath配置
    sub_filter 'window.publicPath = "/"' 'window.publicPath = "/web/"';
    sub_filter_once off;
}

方案二：完全丢弃/web路径，仅对外暴露/app-info路径 #

# 允许/app-info路径访问
location /app-info/ {
    include /etc/nginx/proxy-options/proxy.conf;
    proxy_ssl_session_reuse off;
    proxy_redirect off;
    set $webapp webapp;
    # 转发时映射到后端的/app-info路径，自动去除对外的/app-info前缀
    proxy_pass http://$webapp/app-info/;
    proxy_redirect http://$webapp/ $scheme://$http_host/app-info/;
    sub_filter_types text/html text/css application/javascript;
    sub_filter 'action="/'  'action="/app-info/';
    sub_filter 'href="/'  'href="/app-info/';
    sub_filter 'src="/'  'src="/app-info/';
    sub_filter 'window.publicPath = "/"' 'window.publicPath = "/app-info/"';
    sub_filter_once off;
}

# 阻断所有其他路径请求，可按需修改为跳转/app-info
location / {
    return 403 "Access Denied";
    # 如需跳转替换为：return 302 /app-info/;
}

1. 执行nginx -t验证配置语法是否正确
2. 验证通过后执行nginx -s reload重载Nginx配置
3. 清除浏览器缓存后重新测试访问

内容的提问来源于stack exchange，提问作者Pepsko