HUGO：由于 MIME 类型（“text/html”）不匹配而被阻止（X-Content-Type-Options: nosniff）答案

【问题标题】：HUGO: was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff)HUGO：由于 MIME 类型（“text/html”）不匹配而被阻止（X-Content-Type-Options: nosniff）
【发布时间】：2020-08-10 10:13:09
【问题描述】：

我目前正在尝试将一个 HUGO 站点部署到 Netlify，但我无法做到。我收到以下错误：

资源来自 “https://cdn.jsdelivr.net/gh/theasteve/blog/master@0.0.1/public/assets/main.js” 由于 MIME 类型（“文本/纯文本”）不匹配而被阻止 (X-Content-Type-Options: nosniff)。

不确定为什么 Netlify 返回的是 HTML 而不是 JavaScript 文件。当我检查prism.js 文件和main.js 文件时，这两个文件都在那里。

错误显示来自About 页面，即使删除脚本标签后，我仍然得到一个没有添加任何样式的页面。

<footer class="footer">
  <div class="footer__inner">
    {{ if $.Site.Copyright }}
      <div class="copyright copyright--user">{{ $.Site.Copyright | safeHTML }}</div>
    {{else}}
      {{ partial "logo.html" . }}
      <div class="copyright">
        <span>© {{ now.Year }} Powered by <a href="https://gohugo.io" target="_blank" rel="noopener">Hugo</a></span>
        <span>Theme created by <a href="https://twitter.com/panr" target="_blank" rel="noopener">panr</a></span>
      </div>
    {{end}}
  </div>
</footer>

<script  src="https://cdn.rawgit.com/theasteve/blog/master/public/assets/main.js"></script>
<script  src="https://cdn.rawgit.com/theasteve/blog/master/public/assets/prism.js"></script>
<!-- <script src="{{ "assets/prism.js" | absURL }}"></script> -->

这是我的 config.toml

# baseurl = "https://theasteve.github.io/"
languageCode = "en-us"
theme = "hello-friend"
paginate = 5

[params]
  # dir name of your blog content (default is `content/posts`)
  contentTypeName = "posts"
  # "light" or "dark"
  defaultTheme = "light"
  # if you set this to 0, only submenu trigger will be visible
  showMenuItems = 2
  # Show reading time in minutes for posts
  showReadingTime = false

[languages]
  [languages.en]
    title = "theAsteve"
    subtitle = "Lets get it"
    keywords = ""
    copyright = ""
    menuMore = "Show more"
    writtenBy = "Written by"
    readMore = "Read more"
    readOtherPosts = "Read other posts"
    newerPosts = "Newer posts"
    olderPosts = "Older posts"
    minuteReadingTime = "min read"
    dateFormatSingle = "2006-01-02"
    dateFormatList = "2006-01-02"

    [languages.en.params.logo]
      logoText = "theAsteve"
      logoHomeLink = "/"
    # or

    # path = "/img/your-example-logo.svg"
    alt = "theAsteve"

    [languages.en.menu]
      [[languages.en.menu.main]]
        identifier = "about"
        name = "About"
        url = "/about"

我注释掉了 baseurl，因为在部署到 Netlify 时没有显示任何内容。这是我的 Netlify.toml

[build]
publish = "public"
command = "hugo --gc --minify"

[context.production.environment]
HUGO_VERSION = "0.69.2"
HUGO_ENV = "production"
HUGO_ENABLEGITINFO = "true"

[context.split1]
command = "hugo --gc --minify --enableGitInfo"

[context.split1.environment]
HUGO_VERSION = "0.69.2"
HUGO_ENV = "production"

[context.deploy-preview]
command = "hugo --gc --minify --buildFuture -b $DEPLOY_PRIME_URL"

[context.deploy-preview.environment]
HUGO_VERSION = "0.69.2"

[context.branch-deploy]
command = "hugo --gc --minify -b $DEPLOY_PRIME_URL"

[context.branch-deploy.environment]
HUGO_VERSION = "0.69.2"

[context.next.environment]
HUGO_ENABLEGITINFO = "true"

为什么返回 HTML ？为什么资产没有编译？

【问题讨论】：

同样的问题，同样的错误信息。第一次出现是因为我添加了多语言支持，也许那里有问题？

标签： javascript netlify hugo

【解决方案1】：

找到了解决办法。这是因为 hugo 尝试从另一个 URL 加载 css/js 文件，即如果您在 mydomain.com/en/ 上，hugo 尝试导入 mydomain.com/css/mycss.css 但它必须是 mydomain.com/en/ css/mycss.css

因此，要执行此操作，您需要将 baseof.html 中的静态导入替换为：

<link rel="stylesheet" href='{{ "css/materialize.css" | absLangURL }}'>

您必须使用所有 href 和 src 关键字来执行此操作。希望我能帮上忙：D

【讨论】：

此外，您的脚本和 css 导入需要具有类型属性，即：