Google App Engine部署后CSS加载失败，提示MIME类型不支持错误

你遇到的报错核心原因有两个：

1. 你当前编写的Express服务只配置了根路径/的路由，没有托管静态资源的逻辑，当浏览器请求style.css时，服务端没有对应处理规则，返回了默认的404 HTML页面，内容类型为text/html，和CSS需要的text/css MIME类型不符，因此被浏览器拒绝加载。
2. Google App Engine默认不会自动托管未声明的静态资源，即使你本地用browsersync可以正常加载，部署到GAE后也需要额外配置静态资源规则。

MIME类型简单来说是服务端给资源标注的内容格式标识，浏览器会根据这个标识判断怎么处理返回的内容。

1. 新增Express静态资源托管逻辑 #

在你的Express服务代码中，添加静态资源托管配置，放在根路由配置之前即可：

// 托管当前目录下的所有静态文件，css、js、图片等都可以直接被访问
app.use(express.static(__dirname))

// 原有根路由逻辑保留
app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, '/index.html'));
});

如果你的项目有专门存放静态资源的目录（比如public文件夹），可以把style.css放到该目录下，修改托管逻辑为：

app.use(express.static(path.join(__dirname, 'public')))

2. 配置GAE的app.yaml静态规则（标准环境需要） #

如果你使用的是GAE标准环境，需要在项目根目录的app.yaml中添加静态资源处理规则，示例如下：

runtime: nodejs18 # 对应你使用的Node.js版本
handlers:
  # 匹配所有css后缀的请求，直接返回对应静态文件，自动设置正确的MIME类型
  - url: /(.*\.css)$
    static_files: \1
    upload: .*\.css$
  # 其他所有请求走Node.js服务
  - url: /.*
    script: auto

如果所有静态资源都放在统一目录下，也可以用静态目录配置简化：

handlers:
  - url: /static
    static_dir: static # 所有static目录下的资源都会被直接托管
  - url: /.*
    script: auto

配置完成后重新部署即可正常加载CSS样式。

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