使用Node.js+Express的s3-proxy服务S3上的Vue静态站点时，直接访问子路由出现Missing S3 key错误的解决求助

这个问题是典型的单页应用（SPA）前端路由和服务器代理的冲突问题，我来帮你梳理清楚原因和解决办法：

问题根源 #

Vue应用属于SPA，所有路由切换都是在浏览器端通过Vue Router完成的，不需要向服务器请求新页面。但当你直接在地址栏输入/login或者刷新页面时，浏览器会向Express服务器发送GET /login的请求，你的s3-proxy中间件会尝试去S3存储桶中查找名为login的文件/对象——但S3里根本没有这个文件，只有根目录的index.html和静态资源（比如js、css文件），所以就会抛出"Missing S3 key"的错误。

可行的解决办法 #

方案1：修改Express路由逻辑，优先处理SPA路由 #

你可以在s3-proxy之前添加一个路由判断：如果请求的路径不是静态资源（比如不是.js、.css、.png这类后缀的文件），就强制让s3-proxy返回index.html，这样Vue Router就能在前端接管路由了。

修改后的代码如下：

app.get("/*", (req, res, next) => {
  // 判断请求的是不是静态资源文件
  const isStaticAsset = /\.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$/.test(req.path);
  if (!isStaticAsset) {
    // 如果不是静态资源，把请求路径改成根路径，让s3-proxy返回index.html
    req.url = "/";
  }
  next();
}, s3Proxy({ 
    bucket: config.AWS.S3.UI.BUCKET, 
    accessKeyId: config.AWS.ACCESS_KEY_ID, 
    secretAccessKey: config.AWS.SECRET_ACCESS_KEY, 
    defaultKey: "index.html", 
}) );

方案2：配置S3存储桶的静态网站托管（如果可行的话） #

如果你的场景允许直接用S3的静态网站托管功能，而不是通过Express代理，其实可以更简单：

• 在S3存储桶的静态网站托管设置里，把错误文档也设置为index.html。这样当S3找不到对应路径的文件时，会自动返回index.html，Vue Router就能处理前端路由了。
• 不过如果你必须通过Express代理访问，那方案1更适合你。

方案3：使用s3-proxy的modifyRequest选项 #

有些版本的s3-proxy支持modifyRequest配置项，可以用来修改请求的key。你可以利用这个选项，判断如果请求的路径不是静态资源，就把key改成index.html：

app.get("/*", s3Proxy({ 
    bucket: config.AWS.S3.UI.BUCKET, 
    accessKeyId: config.AWS.ACCESS_KEY_ID, 
    secretAccessKey: config.AWS.SECRET_ACCESS_KEY, 
    defaultKey: "index.html",
    modifyRequest: function(req) {
      const isStaticAsset = /\.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$/.test(req.path);
      if (!isStaticAsset) {
        req.path = "/index.html";
      }
      return req;
    }
}) );

注意：这个方案需要确认你使用的s3-proxy版本是否支持modifyRequest参数，不同版本的API可能有差异。

验证方法 #

修改完代码后，重启Express服务器，然后直接访问/login路径，应该会正常加载Vue应用，并且Vue Router会自动跳转到对应的登录页面，不会再出现"Missing S3 key"的错误了。

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