Загрузка WMS в Vuejs с помощью OpenLayers
Я пытаюсь прочитать слой WMS с локального хост-Геосервера в 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/sockjs-node/info-что?t=1578388235952 'от начала координат 'http://localhost:3000" был заблокирован политикой CORS: значение заголовка "Access-Control-Allow-Origin " в ответе не должно быть подстановочным знаком"*", когда режим учетных данных запроса - "include". Режим учетных данных запросов, инициируемых XMLHttpRequest, управляется атрибутом withCredentials.
Ответы - Загрузка WMS в Vuejs с помощью OpenLayers / Loading WMS in Vuejs with OpenLayers
07.01.2020 12:42:13
У вас есть проблема 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: *”);