拒绝执行脚本，因为它的 MIME 类型 ('text/html') 不可执行并且启用了严格的 MIME 类型检查

Posted 2023-02-22

技术标签:

【中文标题】拒绝执行脚本，因为它的 MIME 类型 (\'text/html\') 不可执行并且启用了严格的 MIME 类型检查【英文标题】：Refused to execute script because its MIME type ('text/html') is not executable and strict MIME type checking is enabled拒绝执行脚本，因为它的 MIME 类型 ('text/html') 不可执行并且启用了严格的 MIME 类型检查 【发布时间】：2018-09-30 21:06:33 【问题描述】：

我在 node server.js 上运行它时遇到错误。错误说

“拒绝执行来自 'http://localhost:8888/inventoryApp.js' 的脚本，因为它的 MIME 类型 ('text/html') 不可执行，并且启用了严格的 MIME 类型检查。”

index.html

<!DOCTYPE html>
<html>

<head>
  <title>Inventory App</title>
  <!--CSS Bootstrap CDN-->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">


  <!--Angular CDN-->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
  <!--angular ui-router CDN-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js"></script>
  <!--inventoryApp module link-->
  <script src="inventoryApp.js"></script>

</head>

<body>
  <div class="container" ng-app="inventoryApp">
    <header ng-include="'nav.html'"></header>
    <h1>Dashboard</h1>
    <div ng-controller="inventoryCtrl">

      <!--searchItem-->
      <div>
        <label for="searchItemTextField">Search Item</label>
        <input id="searchItemTextField" type="text" name="searchItemTextField" ng-model="searchItem">
      </div>
      <!--inventory table-->
      <div>
        <table class="table-bordered">
          <tr>
            <th>index#</th>
            <th>Item Name</th>
            <th>Quantity</th>
            <th>Update Quantity</th>
            <th>Quantity Alert</th>
            <th>Set Quantity Alert</th>
          </tr>
          <tbody ng-repeat="item in inventory | filter: searchItem track by $index">
            <tr>
              <td>$index+1</td>
              <td>item.itemName</td>
              <td>item.quantity</td>
              <td>
                <div class="btn-group" role="group" aria-label="Basic example">
                  <input id="updateQuantityTextField" type="text" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57" name="updateQuantityTextField" ng-model="newQuantity">
                  <button type="button" class="btn btn-secondary" ng-click="addQuantity(item, newQuantity)">Add</button>
                  <button type="button" class="btn btn-secondary" ng-click="deductQuantity(item, newQuantity)">Deduct</button>
                  <button type="button" class="btn btn-secondary" ng-click="setQuantity(item, newQuantity)">Set</button>
                </div>
              </td>
              <td>item.quantityAlert</td>
              <td>
                <input id="restockQtyTextField" type="text" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57" name="restockQtyTextField" ng-model="quantityAlert">
                <button type="button" class="btn btn-secondary" ng-click="setQuantityAlert(item, quantityAlert)">Set</button>
              </td>
              <td><button ng-click="deleteItem(item)">Delete Item</button></td>
              <td class="alert alert-danger" role="alert" ng-if="item.quantity <= item.quantityAlert">Quantity Alert!</td>

            </tr>
          </tbody>
        </table>
        <br>
      </div>



      <div>
        <form ng-submit="addItem()">
          <label for="itemName">Item Name</label>
          <input id="itemName" type="text" name="itemName" ng-model="newItem.itemName" required="">

          <label for="quantity">Quantity</label>
          <input id="quantity" type="text" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57" name="quantity" ng-model="newItem.quantity" required>

          <button type="submit">Add Item</button>
        </form>
      </div>



    </div>
  </div>



</body>


</body>

</html>

nav.html

<ul class="nav nav-pills pull-right">
  <li ui-sref-active="active"><a ui-sref="home">Home</a></li>
  <li ui-sref-active="active"><a ui-sref="about">About</a></li>
  <li ui-sref-active="active"><a ui-sref="contact">Contact</a></li>
</ul>

inventoryApp.js 文件

var inventoryApp = angular.module('inventoryApp', ['ui.router']);


inventoryApp.controller('inventoryCtrl', ['$scope', function($scope) 

  var item1 = new Item("shirt", 1);
  var item2 = new Item("phone", 1);

  var inventory = [];


  inventory.push(item1);
  inventory.push(item2);

  $scope.inventory = inventory;

  $scope.addItem = function() 

    if ($scope.newItem.itemName === undefined) 
      $scope.newItem.itemName = "";
    

    //trim whitespaces
    $scope.newItem.itemName = $scope.newItem.itemName.replace(/^\s+/, '').replace(/\s+$/, '');

    //validate quantity and itemName
    if (parseInt($scope.newItem.quantity) > 0 && $scope.newItem.itemName !== "") 
      //convert quantity "01 to 1"
      $scope.newItem.quantity = parseInt($scope.newItem.quantity);
      $scope.inventory.push($scope.newItem);
      $scope.newItem = ;
     else 
      alert("invalid item name");
    

  ;


  $scope.deleteItem = function(item) 

    var index = $scope.inventory.indexOf(item);
    $scope.inventory.splice(index, 1);
    $scope.searchItem = "";
  

  $scope.addQuantity = function(item, newQuantity) 
    if (newQuantity !== undefined && newQuantity !== "") 
      item.quantity = parseInt(item.quantity) + parseInt(newQuantity);
      this.newQuantity = "";
    

  

  $scope.deductQuantity = function(item, newQuantity) 
    if (newQuantity !== undefined && newQuantity !== "") 
      item.quantity = parseInt(item.quantity) - parseInt(newQuantity);
      this.newQuantity = "";
    
  

  $scope.setQuantity = function(item, newQuantity) 
    if (newQuantity !== undefined && newQuantity !== "") 
      item.quantity = parseInt(newQuantity);
      this.newQuantity = "";
    
  

  $scope.setQuantityAlert = function(item, quantityAlert) 
    if (quantityAlert !== undefined && quantityAlert !== "") 
      item.quantityAlert = quantityAlert;
      this.quantityAlert = "";
    
  






]);





function Item(itemName, quantity) 
  var itemName;
  var quantity;
  var quantityAlert = -1;

  this.itemName = itemName;
  this.quantity = quantity;



  function getItemName() 
    return this.itemName;
  

  function getQuantity() 
    return this.quantity;
  

  function getQuantityAlert() 
    return quantityAlert;
  

  function setItemName(itemName) 
    this.itemName = itemName;
  

  function setQuantity(quantity) 
    this.quantity = quantity;
  

  function setQuantityAlert(quantity) 
    this.quantityAlert = quantity;

server.js

var express = require('express');
var app = express();
var port = 8888;

app.get('/', function(req, res, next) 
  res.sendFile(__dirname + '/index.html');


);

app.listen(port, '0.0.0.0', function() 
  console.log('Server running at port ' + port);
);

【问题讨论】：

【参考方案1】：

查看您的服务器的代码。

你有这个：

app.get('/', function(req, res, next) 
  res.sendFile(__dirname + '/index.html');
);

…当您请求 / 时，它会为 index.html 文件提供服务。

处理 /inventoryApp.js 请求的代码在哪里？

你需要写它。（提示：研究使用 Express 提供静态文件的模块）。

【讨论】：

以上是关于拒绝执行脚本，因为它的 MIME 类型 ('text/html') 不可执行并且启用了严格的 MIME 类型检查的主要内容，如果未能解决你的问题，请参考以下文章

拒绝从 '*' 执行脚本，因为它的 MIME 类型 ('application/json') 不可执行，并且启用了严格的 MIME 类型检查

拒绝从“*”执行脚本，因为它的 MIME 类型（'text/HTML'）不可执行

拒绝从 URL 执行脚本，因为它的 MIME 类型 ('application/json') 不可执行，并且启用了严格的 MIME 类型检查

拒绝从 'URL' 执行脚本，因为它的 MIME 类型 ('text/html') 不可执行，并且启用了严格的 MIME 类型检查

拒绝从 'url' 执行脚本，因为它的 MIME 类型（'application/json'）不可执行

将 jQuery 插件导入 Angular 2+ 拒绝执行脚本，因为它的 MIME 类型（'text/html'）不可执行