请求授权按钮报错：MIME类型不匹配与函数未定义问题求助

问题现象 #

点击「Request Authorization」按钮时，控制台抛出两个关联错误：

• 资源「http://127.0.0.1:5000/public/javascript/Login.js」因MIME类型（“text/html”）不匹配被拦截（X-Content-Type-Options: nosniff）；
• Uncaught ReferenceError: requestAuthorization is not defined

根本原因 #

两个错误是连锁反应：

1. HTML中静态资源路径配置错误，加上Express路由拦截了静态文件请求，导致浏览器请求JS文件时返回了HTML页面，触发MIME类型不匹配拦截；
2. JS文件未正确加载，因此requestAuthorization函数未定义，点击按钮时触发引用错误。

修复步骤 #

1. 修正HTML中的静态资源引用路径 #

打开client/src/pages/loginPage.html，将所有静态资源的相对路径改为基于网站根目录的绝对路径（Express已将client/src/public挂载为根目录的静态资源文件夹）：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Page</title>
    <!-- 修正CSS路径 -->
    <link rel="stylesheet" type="text/css" href="/styles/global.css">
    <link rel="stylesheet" type="text/css" href="/styles/loginPage.css">
    <!-- 修正JS路径 -->
    <script src="/javascript/Login.js"></script>
</head>
<!-- 修正图片路径 -->
<center><img src="/images/Spotify_logo.png" width="1000" height="300"></center>

2. 调整Express路由优先级与规则 #

• 确保server.js中静态资源中间件的加载顺序在路由之前（当前代码已满足，但需确认）：

const publicPath = '../client/src/public';
// 静态资源中间件放在路由前面
app.use(express.static(path.join(__dirname, publicPath)));
app.use('/', router);

• 检查server/router/htmlRoutes.js中的路由配置，避免使用*通配符路由拦截静态资源请求。例如，如果存在以下代码：

router.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, '../../client/src/pages/loginPage.html'));
});

需改为指定具体路径的路由：

router.get('/', (req, res) => {
    res.sendFile(path.join(__dirname, '../../client/src/pages/loginPage.html'));
});

这样静态资源的请求（如/javascript/Login.js）会被静态中间件处理，而非返回HTML页面。

3. 验证静态资源访问 #

启动服务器后，直接访问http://127.0.0.1:5000/javascript/Login.js，如果能看到Login.js的代码内容，说明静态资源配置正确；如果返回HTML页面，需重新检查路由规则。

4. 移除未定义的onPageLoad回调 #

HTML的head标签中存在onload="onPageLoad()"，但Login.js中未定义该函数，会触发额外错误，建议移除该属性：

<!-- 移除onload属性 -->
<head>
    ...
</head>

或在Login.js中添加空实现：

function onPageLoad() {
    // 页面加载逻辑可在此添加
}

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