如何限制React打包后静态资源文件的直接访问？

可以实现，需要调整服务器配置配合React路由，核心逻辑是区分「页面正常加载静态资源的请求」和「用户手动在地址栏访问静态资源路径的请求」，避免影响页面正常运行。

Nginx 部署场景 #

主流的React SPA Nginx部署配置默认会优先返回存在的静态文件，不存在的路径才返回index.html交给前端路由处理。我们可以通过判断请求的Accept头区分请求类型：用户手动在地址栏访问资源时，请求头的Accept会优先包含text/html，而页面主动加载js/css等静态资源时，Accept头不会包含该值。
调整后的Nginx配置参考：

# 静态资源匹配规则
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
    # 仅用户手动访问静态资源时重写路径
    if ($http_accept ~* "text/html") {
        rewrite ^ /index.html last;
    }
    # 正常资源请求走原有缓存逻辑
    expires 1y;
    add_header Cache-Control "public, immutable";
}

# 原有SPA兜底规则保留
location / {
    try_files $uri $uri/ /index.html;
}

Node.js（Express/Koa）部署场景 #

如果用Node服务托管前端资源，可以在静态资源中间件前加一层判断逻辑，Express示例代码如下：

const express = require('express');
const path = require('path');
const app = express();

// 静态资源中间件前加拦截逻辑
app.use((req, res, next) => {
  // 匹配静态资源后缀的请求
  const staticReg = /\.(js|css|png|jpg|jpeg|gif|ico|svg)$/;
  if (staticReg.test(req.path) && req.headers.accept?.includes('text/html')) {
    // 用户手动访问的情况直接返回index.html
    return res.sendFile(path.join(__dirname, 'build', 'index.html'));
  }
  next();
});

// 原有静态资源托管逻辑
app.use(express.static(path.join(__dirname, 'build')));

// SPA兜底路由
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

app.listen(3000, () => console.log('服务启动成功'));

注意事项 #

• 不要直接全量拦截所有静态资源请求，否则页面正常加载js/css资源时会拿到index.html的内容，直接导致页面白屏报错。
• 若使用Vercel、Netlify等平台部署，可参照上述逻辑配置平台对应的重写规则即可实现相同效果。

内容的提问来源于stack exchange，提问作者Aditya Kumar Singh