Загрузка WMS в Vuejs с OpenLayers - PullRequest
Новая
       9

Загрузка WMS в Vuejs с OpenLayers

0 голосов
/ 07 января 2020

Я пытаюсь прочитать слой WMS с локального хоста Geoserver в Vue. js. Я использую Geoserver на другом порту, чем мой vue. js.

Как я должен загрузить в Vue JS мой слой WMS, как в этом примере: https://vuelayers.github.io/# / docs / component / tile-layer 

    <template>
      <vl-map :load-tiles-while-animating="true" :load-tiles-while-interacting="true" data-projection="EPSG:4326" style="height: 400px">
        <vl-view :zoom.sync="zoom" :center.sync="center" :rotation.sync="rotation"></vl-view>

        <vl-layer-tile>
          <vl-source-sputnik></vl-source-sputnik>
        </vl-layer-tile>

        <vl-layer-tile id="wmts">
          <vl-source-wmts :attributions="attribution" :url="url" :layer-name="layerName" :matrix-set="matrixSet" :format="format" 
                          :style-name="styleName"></vl-source-wmts>
        </vl-layer-tile>
      </vl-map>
    </template>

    //////////////////////////////// For WMS SOURCES 
<script>
  export default {
    data () {
      return { 
        zoom: 4,
        center: [50, 40],
        rotation: 0,
        cmp: 'vl-source-wms',
        url: 'http://localhost:8081/geoserver/cite/wms',
        layers: 'cite:vnm_polbnda_adm3_2014_pdc',
        extParams: { TILED: true },
        serverType: 'geoserver',
      }
    },
  }
</script>

В моем браузере: Доступ к XMLHttpRequest по адресу http://192.168.1.23: 3000 / sock js -node / info? T = 1578388235952 'from origin' http://localhost: 3000 'был заблокирован политикой CORS: значение заголовка «Access-Control-Allow-Origin» в ответе не должно быть подстановочным знаком «*», если режим учетных данных запроса «включить». Режим учетных данных запросов, инициируемых XMLHttpRequest, управляется атрибутом withCredentials.

1 Ответ

1 голос
/ 07 января 2020

У вас есть проблема с CORS (CORS означает перекрестное распределение ресурсов). Вам необходимо включить CORS на вашем сервере. 

devServer: {
  ...
  headers: {
    "Access-Control-Allow-Origin": "*",
    "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
    "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
  }
}

Некоторые хорошие ресурсы для включения CORS можно найти здесь:

https://scotch.io/courses/build-an-online-shop-with-vue/enabling-cors

Если у вас есть PHP бэкэнд, вы можно просто включить следующий заголовок: 

header(“Access-Control-Allow-Origin: *”);
...