Vue.js 使用OpenLayers在Vuejs中加载WMS

我正在尝试从Vue.js中的本地主机Geoserver读取WMS层。我在与vue.js不同的端口上运行Geoserver

我应该如何在Vue JS my WMS层中加载，如本例所示：

////////////////////////////////对于WMS源
导出默认值{
数据（）{
返回{
缩放：4，
中间：[50,40]，
轮换：0，
cmp:“vl源wms”，
网址：'http://localhost:8081/geoserver/cite/wms',
图层：“引用：vnm_polbnda_adm3_2014_pdc”，
extParams:{TILED:true}，
服务器类型：“地理服务器”，
}
},
}

在我的浏览器中：CORS策略已阻止从源“”访问“”处的XMLHttpRequest:当请求的凭据模式为“包括”时，响应中“访问控制允许源”标头的值不得为通配符“*”。XMLHttpRequest启动的请求的凭据模式由withCredentials属性控制。

您有一个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的好资源：

如果您有PHP后端，则只需包含以下标题：

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

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