资源因MIME类型与传单地图不匹配而被阻止 HTML CSS Javascript 缺点专业人士

编程问答 2022-06-03

问题描述

我已经创建了一张传单地图，我想在该传单地图上绘制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/[email protected]/dist/leaflet.css"
    integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcdubeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
    crossorigin=""/>
    <script src="https://unpkg.com/[email protected]/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/[email protected]/dist/esri-leaflet.js"
    integrity="sha512-xY2smLIHKirD03vHKDJ2u4pqeHA7OQZZ27EjtqmuhDguxiUvdsOuXMwkg16PQrm9cgTmXtoxA6kwr8KBy3cdcw=="
    crossorigin=""></script>

    <script src="https://unpkg.com/[email protected]"></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);

记录在案，因为我知道它使人们感到烦恼：我在这里使用的访问令牌仅是一个临时问题。一旦不再需要，我将撤消它。

解决方法

我能想到的最佳解决方案是从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,},);
htmljavascriptleafletresponse-headers