由于 MIME 类型与传单地图不匹配，资源被阻止答案

【问题标题】：Resource blocked due to MIME type mismatch with leaflet map由于 MIME 类型与传单地图不匹配，资源被阻止
【发布时间】：2021-02-23 21:30:58
【问题描述】：

我创建了一张传单地图，我想在其上绘制来自this NOAA map server 的河流水位计状态。当我最初加载我的地图时，我会在控制台中看到所有相关标记，没有错误。但是，如果我开始在地图上平移（结果加载更多标记），则无法加载点。如果我删除并重新添加图层也是如此。

在我的控制台中，我看到以下错误。 Chrome 给了我：

Request.js:187 Cross-Origin Read Blocking (CORB) blocked cross-origin response https://idpgis.ncep.noaa.gov/arcgis/rest/services/NWS_Observations/ahps_riv_gauges/MapServer/0/query?returnGeometry=true&where=1%3D1&outSR=4326&outFields=*&inSr=4326&geometry=%7B%22xmin%22%3A-90%2C%22ymin%22%3A40.979898069620155%2C%22xmax%22%3A-67.50000000000001%2C%22ymax%22%3A55.7765730186677%2C%22spatialReference%22%3A%7B%22wkid%22%3A4326%7D%7D&geometryType=esriGeometryEnvelope&spatialRel=esriSpatialRelIntersects&geometryPrecision=6&resultType=tile&f=geojson&callback=window._EsriLeafletCallbacks.c56 with MIME type text/plain. See https://www.chromestatus.com/feature/5629709824032768 for more details.

Firefox 也会引发错误：

The resource from “https://idpgis.ncep.noaa.gov/arcgis/rest/services/NWS_Observations/ahps_riv_gauges/MapServer/0/query?returnGeometry=true&where=1%3D1&outSR=4326&outFields=*&inSr=4326&geometry=%7B%22xmin%22%3A-90%2C%22ymin%22%3A55.7765730186677%2C%22xmax%22%3A-67.50000000000001%2C%22ymax%22%3A66.51326044311188%2C%22spatialReference%22%3A%7B%22wkid%22%3A4326%7D%7D&geometryType=esriGeometryEnvelope&spatialRel=esriSpatialRelIntersects&geometryPrecision=6&resultType=tile&f=geojson&callback=window._EsriLeafletCallbacks.c7” was blocked due to MIME type (“text/plain”) mismatch (X-Content-Type-Options: nosniff).

在这两种浏览器中，我都可以加载地图的初始视图，但是一旦加载并开始与之交互，我就会开始遇到这些错误。

我通常理解 X-Content-Type-Options 导致了我这个问题。如果我查看 Firefox 中的响应标头，我可以确认 x-content-type-options 是 nosniff 并且 content-type 是 text/plain; charset=UTF-8。

由于我对服务器没有任何控制权，因此不能直接影响响应标头，有什么办法可以克服这种行为吗？

我创建了一个工作 CodePen here 来重现错误。实际的 CodePen 控制台不会显示错误，但如果您打开浏览器控制台，它会显示为广告。

以下是相关代码：

HTML

<head>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
    integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
    crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
    integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
    crossorigin=""></script>
    <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">
    <script src="https://kit.fontawesome.com/369cdded93.js" crossorigin="anonymous"></script>

    <script src="https://unpkg.com/esri-leaflet@2.4.1/dist/esri-leaflet.js"
    integrity="sha512-xY2smLIHKirD03vHKDJ2u4pqeHA7OQZZ27EjtqmuhDguxiUvdsOuXMwkg16PQrm9cgTmXtoxA6kwr8KBy3cdcw=="
    crossorigin=""></script>

    <script src="https://unpkg.com/esri-leaflet-renderers@2.0.6"></script>
</head
<body>
<div class="col-xl-9 m-0 p-0" id="mapdiv">
  <div id="mapid"></div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

CSS

body {
  background-color: rgb(25,26,26);
}

#mapid {
  height:100vh;
  width: 100vw;
}

Javascript

var mymap = L.map('mapid', {
    center: [63.2008, -155.00],
    zoom: 5,
    dragging: !L.Browser.mobile,
    tap: !L.Browser.mobile,
    scrollWheelZoom: false,
    });

L.tileLayer('https://{s}.tile.jawg.io/jawg-dark/{z}/{x}/{y}{r}.png?access-token={accessToken}', {
    attribution: '<a href="https://www.jawg.io" title="Tiles Courtesy of Jawg Maps" target="_blank">&copy; <b>Jawg</b>Maps</a> &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
    minZoom: 0,
    maxZoom: 22,
    subdomains: 'abcd',
    accessToken: 'shsyk3yIdzeeE6ZnSv1Da78AItybRtOzvOvOgxaYEJBScuSbR7d2LbMsIKOw1dqN'
}).addTo(mymap);

var riverGauges = L.esri.featureLayer({
    url: 'https://idpgis.ncep.noaa.gov/arcgis/rest/services/NWS_Observations/ahps_riv_gauges/MapServer/0',
    ignoreRenderer: false,
    useCors: false,
    cacheLayers: true,
    onEachFeature: function(feature, layer) {
        layer.feature.properties.gaugelid = layer.feature.properties.gaugelid.toLowerCase();
        layer.feature.properties.url = "https://water.weather.gov/resources/hydrographs/" + layer.feature.properties.gaugelid + "_hg.png";

        layer.bindPopup(function(layer) {
            return L.Util.template(
                `<iframe style="border:none; height:100%; width:100%;" src={url}></iframe>
                `
                ,layer.feature.properties)
        },
        {
            minWidth: 600,
        })
    },
    /*
    pointToLayer: function(feature, latlng) {
                    return L.marker(latlng, {icon:floodIcon});    
                },*/
    attribution: 'River Gauges: <a href="https://water.weather.gov/ahps/region.php?state=ak" target="_blank">NWS/NOAA</a>',
    }).addTo(mymap);

let overlays = {};
let points = {
  "River Gauges" : riverGauges
  };
L.control.layers(overlays, points).addTo(mymap);

郑重声明，因为我知道这会让人们担心：我在这里使用的访问令牌只是这个问题的临时令牌。一旦不再需要，我会撤销它。

【问题讨论】：

标签： javascript html css leaflet response-headers

【解决方案1】：

我能想到的最佳解决方案是将featureLayer 更改为dynamicMapLayer。然而，这需要一些权衡：

缺点

无法自定义图标
难以用 css 设置样式

优点

加载速度更快
没有 MIME 类型或 CORB 问题

let riverGauges = L.esri.dynamicMapLayer({
  url: 'https://idpgis.ncep.noaa.gov/arcgis/rest/services/NWS_Observations/ahps_riv_gauges/MapServer',
  useCors: false,
  f: 'image',
  layers: [0],
  layerDefs: {0:
             "status IN ('no_flooding') AND state='AK'", //"status IN ('major', 'moderate', 'minor', 'action') AND state='AK'"
             },
  disableCache: false,
  attribution: 'River Gauges: <a href="https://water.weather.gov/ahps/region.php?state=ak" target="_blank">NWS/NOAA</a>',
}).addTo(mymap);

riverGauges.bindPopup(function(error, featureCollection) {
    if (error || featureCollection.features.length === 0) {
    return false;
    } else {
    let gaugelid = featureCollection.features[0].properties.gaugelid.toLowerCase();
    let url = "https://water.weather.gov/resources/hydrographs/" + gaugelid + "_hg.png";
    return L.Util.template(
        `<iframe style="border:none; height:465; width:600;" src={url}></iframe>`,
        {'url':url}                      
    );
    }},
    {
    minWidth: 600,
    },
    );

【讨论】：