Question

在我的node.js应用程序中，我设置了一个端点，在该端点中加载了一些已解析的html代码。像这样。

app.get('/code', function (req, res) {
    res.setHeader('Content-Type', 'text/html');
    res.send(code.html); 
});

code是一个看起来像这样的json对象。

code = { html: 'Bunch of html code i took from some site. This contains css and javascript code as well.' };

在我的索引文件中，我有一个如下所示的iframe。

<iframe src="http://localhost:port/code" width="400" height="400"></iframe>

iframe正在运行，但是当我尝试加载视图时，大多数CSS和javascript都无法解析。我收到以下错误：

Refused to apply style from 'http://localhost:3000/docs/4.3/dist/css/bootstrap.min.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

正在解析html，但是视图看上去有点失真，并且没有CSS或javascript正确运行。如果我在Chrome中打开“网络”标签，则请求网址如下所示。

Request URL: http://localhost:3000/docs/4.3/assets/js/docs.min.js

每个样式表和js代码都附加到我的本地主机URL中。那就是为什么CSS和JS无法解析的原因呢？我该如何解决？

Answer 1

我试图复制它，但是一切对我来说都很好。这是我的代码。

app.get('/code', (req, res) => {
  const code = {
    html: '
    <!DOCTYPE html>
    <html lang="en" dir="ltr">
      <head>
        <meta charset="utf-8">
        <title>Test</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
      </head>
      <body>
      <h1 class="button">Test</h1>
      </body>
    </html>
',
  };
  res.setHeader('Content-Type', 'text/html');
  res.send(code.html);
});

<iframe src="http://localhost:3121/code" width="400" height="400"></iframe>

This is my result

在iframe中未解析CSS和Javascript

1 个答案: