javascript - 如何在 Express [MEAN] 中发送 header

Question

我是 Express 的初学者。所以我可能没有正确地提出问题。我创建了一个 MEAN 应用程序，其中我将 frontend 分开了和 backened .前端运行于 port:4200服务器在 port:3000 上运行.作为部署的一部分，我想在同一端口上同时运行前端和后端。我收到 MIME 类型错误，有人告诉我我的服务器环境有问题。也许我没有正确发送 header 。这是我的代码:我在代码本身中提到了尝试过的解决方案 <----TRIED THIS

server.js

const express = require('express');
express.static.mime.define({'application/javascript': ['js']}); <----TRIED THIS

const bodyParser = require('body-parser');
const path = require('path');

// express.static.mime.define({'application/javascript': ['js']}); <----TRIED THIS

const api = require('./routes/api');

const PORT = 3000;
const app = express();

app.use(express.static(path.join(__dirname, 'dist')));
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

app.use('/api', api);

app.get('/', function(req, res) {

  // res.send('Hello from the server'); <----TRIED THIS
  // res.writeHead(200, {'Content-Type': 'text/html'}); <----TRIED THIS
  // res.set('Content-Type', 'text/plain'); <----TRIED THIS
  // res.setHeader("Content-Type","application/json"); <----TRIED THIS

  res.sendFile(path.join(__dirname, 'dist/application/index.html'));
})
app.listen(PORT, function() {
  console.log('Server listening on PORT '+PORT);
});

api.js例如，我只向您展示 GET 函数

const express = require('express');
const router = express.Router();
const mongoose = require('mongoose');
const db = <my db string>;
const jwt = require('jsonwebtoken');

mongoose.connect(
 ...
)

function verifyToken(req, res, next) {
 ...
}

router.get('/myarticles', (req, res) => {
  var person="Tanzeel Mirza";
  console.log('Get request for tanzeel articles');
  Article.find({contributor: person}, (error, article) => {
    if(error) {
      console.log(error)
    }
    else {
      if(!article) {
        res.status(401).send('Invalid email')
      }
      else if(2>4) {
        console.log("test passed");
      }
      else {
        res.json(article);
      }
    }
  })
})

module.exports = router;

但我还是得到了

Loading module from “http://localhost:3000/runtime-xxx.js” was blocked because of a disallowed MIME type (“text/html”).

Loading module from “http://localhost:3000/polyfills-xxx.js” was blocked because of a disallowed MIME type (“text/html”).

Loading module from “http://localhost:3000/main-xxx.js” was blocked because of a disallowed MIME type (“text/html”).

请指正。

PS:我针对 MIME 错误问了单独的问题 here .但没有答案。

Answer 1

由于您的 Assets 位于 dist/application 文件夹中，使用 app.use(express.static(path.join(__dirname, 'dist/application')));

要匹配所有网络应用程序路由，请使用 app.get('*', function(req, res) {
res.sendFile(path.join(__dirname, 'dist/application/index.html'));
})。

这是一条通用路由，仅当 express 找不到任何其他路由且始终提供 index.html 时才会调用该路由。例如，任何有效的 /api 路由都不会到达此处理程序，因为有一个特定的路由来处理它。

server.js 的最终代码

const express = require('express');
const bodyParser = require('body-parser');
const path = require('path');


const api = require('./routes/api');

const PORT = 3000;
const app = express();

app.use(express.static(path.join(__dirname, 'dist/application')));
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

app.use('/api', api);

app.get('*', function(req, res) {
  res.sendFile(path.join(__dirname, 'dist/application/index.html'));
})

app.listen(PORT, function() {
  console.log('Server listening on PORT '+PORT);
});

有几点不能。

要提供静态文件，您无需手动设置任何 header 。 Express 在您使用 express.static 中间件功能设置为静态目录的文件夹(在您的情况下为 dist 文件夹)中查找文件。 Express 还根据文件扩展名设置响应 header 。

因此您的代码中不再需要 express.static.mime.define。

在你的例子中，你已经定义了 app.use(express.static(path.join(__dirname, 'dist'))); 它在 dist 中监听静态文件> 文件夹。在此 app.use 命令中，您没有使用挂载路径，这意味着所有请求都将通过静态中间件。如果中间件在 dist 文件夹中找到具有相同名称、路径和扩展名的 Assets ，它会返回该文件，否则将请求传递给其他路由处理程序。

此外，如果您使用的是静态中间件，只要 dist 文件夹(dist 文件夹的直接子文件夹)中有 index.html，您的“/”路由处理程序将永远不会被调用，因为响应将由中间件。

如果您在 dist 文件夹(dist 的直接子文件夹)中没有索引 html 文件，但它存在于 dist 的子文件夹中的某处，并且您仍然需要使用根路径“/”访问它，那么您只需要路径“/”的路由处理程序，如下所示。

app.get("/", function(req, res) {
  res.sendFile(path.join(__dirname, "dist/application/index.html"));
});

在 dist/application/index.html 中使用 "./" 引用的 JS 文件是相对于 dist 文件夹本身引用的，不是 dist/application 文件夹。

您可以引用此 REPL 以获取更新的代码 👉。 https://repl.it/repls/SoreFearlessNagware

试试下面的网址

/api/myarticles - 由“/api”路由处理程序呈现

/api/myarticles.js - 由静态 Assets 中间件呈现，因为该文件存在于 dist/api 文件夹中

/ - 使用“/”路由处理程序和 res.sendFile 呈现，因为 dist 文件夹中不存在 index.html。

/test.js - 使用静态中间件呈现，因为文件存在于 dist 文件夹中

供引用的附加链接。

https://expressjs.com/en/api.html#res.sendFile

https://expressjs.com/en/starter/static-files.html