ReactJS应用反向代理至WordPress子目录遇CORB报错求助

看起来你遇到的问题核心是反向代理配置不匹配加上React应用的资源路径未适配子目录，导致浏览器触发CORB拦截，同时静态资源无法正确加载。咱们一步步拆解解决：

问题根源分析 #

1. CORB触发原因：浏览器检测到跨源响应的MIME类型（这里是text/html）和实际资源类型不匹配——比如本该返回application/javascript的React打包JS文件，被代理成了text/html，浏览器就会触发拦截。
2. 页面仅显示纯文本：React的入口JS/CSS没有加载成功，只有public/index.html里的静态文本能被渲染，说明代理没有正确转发子目录下的静态资源请求，或者React生成的资源路径还是根路径（/static/js/xxx.js），而非子目录路径（/datastaging/static/js/xxx.js）。
3. WordPress路由冲突：WordPress可能会优先拦截/datastaging下的请求，处理自身路由规则，导致代理请求没被正确转发。

分步解决方案 #

1. 配置React应用适配子目录访问 #

React默认以根路径作为资源基准，当通过子目录/datastaging访问时，必须修改资源路径前缀：

• 在项目根目录的package.json中添加homepage字段：

  {
    "name": "your-react-app",
    "homepage": "/datastaging",
    // 其他原有配置...
  }
  

• 重新构建React应用：

  npm run build
  

  这样打包后的静态资源路径都会自动带上/datastaging前缀，确保代理后能正确找到资源。

2. 修正反向代理配置（以Nginx为例） #

假设你用Nginx做反向代理，需要确保/datastaging下的所有请求都转发到React应用，并且正确处理路径重写和请求头：

server {
    listen 80;
    server_name 35.240.238.94;

    # 优先处理React应用的代理请求，避免被WordPress路由拦截
    location /datastaging {
        # 转发到React应用地址
        proxy_pass http://dspstaging.drwealth.com;
        # 传递Host头，让React应用知道当前访问的域名/子目录
        proxy_set_header Host $host;
        # 传递真实IP和协议头
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        # 重写路径：去掉/datastaging前缀，转发给React应用处理
        rewrite ^/datastaging(.*)$ $1 break;
    }

    # 处理WordPress的默认路由
    location / {
        root /path/to/wordpress;
        index index.php index.html index.htm;
        try_files $uri $uri/ /index.php?$args;
    }

    # WordPress的PHP处理（对应你的PHP版本）
    location ~ \.php$ {
        fastcgi_pass unix:/run/php/php7.4-fpm.sock;
        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        include fastcgi_params;
    }
}

如果是Apache服务器，修改.htaccess添加代理规则：

# 先代理/datastaging请求
RewriteEngine On
RewriteRule ^datastaging/(.*)$ http://dspstaging.drwealth.com/$1 [P,L]

# WordPress默认路由规则
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]

3. 验证MIME类型配置 #

确保服务器返回的静态资源MIME类型正确：

• Nginx默认会正确识别JS/CSS的MIME类型，若有自定义配置，确保包含：

  types {
      text/css css;
      application/javascript js;
      # 其他必要的MIME类型...
  }
  

• Apache需确保mod_mime模块已启用，且mime.types文件包含正确的类型映射。

4. 清除缓存并测试 #

修改配置后重启Web服务器（Nginx/Apache），然后用Ctrl+Shift+R强制刷新浏览器清除缓存，访问http://35.240.238.94/datastaging：

• 检查控制台是否还有CORB错误；
• 查看网络请求，确认所有静态资源（JS/CSS）状态码为200且路径正确；
• 验证React应用是否正常渲染。

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