React+Tailwind CSS样式加载报错：MIME类型text/html不被支持

你的报错核心原因是：请求http://localhost:3000/src/output.css时，后端返回的是HTML（MIME类型为text/html）而非预期的CSS文件。这是因为package.json中配置的全局代理把静态资源请求也转发到了后端服务，而后端未正确匹配该路径，返回了404页面（HTML），导致浏览器无法识别为样式表。

方案1：使用自定义代理规则（推荐） #

放弃package.json中的简单代理配置，改用http-proxy-middleware实现精准代理，仅转发API请求，排除静态资源：

1. 安装依赖：

npm install http-proxy-middleware --save-dev

2. 在src目录下创建setupProxy.js文件，添加以下代码：

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  // 仅转发/api开头的请求到后端服务
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:8800',
      changeOrigin: true,
    })
  );
};

3. 删除package.json中的proxy字段，重启React开发服务器。

此方案下，只有/api前缀的请求会被转发到后端，静态资源请求（如CSS、图片）由CRA开发服务器直接处理，返回正确的MIME类型。

方案2：调整静态资源存放与引用路径 #

将Tailwind生成的output.css移动到项目根目录的public文件夹（React默认静态资源根目录），然后修改引用路径：

• 在public/index.html中修改：

<link rel="stylesheet" href="/output.css">

• 或在React组件中直接导入：

import '../public/output.css';

这种方式下，静态资源请求不会触发代理转发，直接由CRA处理，避免MIME类型错误。

方案3：调整后端静态资源路由前缀 #

如果必须保留src作为静态资源目录，可修改后端的静态资源挂载路径，添加专属前缀避免被代理转发：

1. 修改后端代码：

// 给src目录的静态资源添加/static前缀
app.use('/static', express.static(path.join(__dirname, 'src')));
app.use(express.static(path.join(__dirname, 'public')));

2. 前端修改CSS引用路径为/static/output.css，确保请求被后端静态资源服务正确处理，返回CSS文件而非HTML。

之前修改静态文件路径无效，是因为代理规则仍会把请求转发到后端，而后端无法匹配路径返回了HTML页面。只有让静态资源请求不经过代理，或后端能正确返回对应资源，才能解决MIME类型错误。

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