Openlayers+vue调用GeoServer的api报跨域错误解决方法_vue加载geoserver图层出现跨域

Openlayers+vue调用GeoServer：has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested

geoserver安装目录下\webapps\geoserver\WEB-INF\web.xml
取消 以下注释

<!-- Uncomment following filter to enable CORS in Jetty. Do not forget the second config block further down.-->
    <filter>
      <filter-name>cross-origin</filter-name>
      <filter-class>org.eclipse.jetty.servlets.CrossOriginFilter</filter-class>
      <init-param>
        <param-name>chainPreflight</param-name>
        <param-value>false</param-value>
      </init-param>
      <init-param>
        <param-name>allowedOrigins</param-name>
        <param-value>*</param-value>
      </init-param>
      <init-param>
        <param-name>allowedMethods</param-name>
        <param-value>GET,POST,PUT,DELETE,HEAD,OPTIONS</param-value>
      </init-param>
      <init-param>
        <param-name>allowedHeaders</param-name>
        <param-value>*</param-value>
      </init-param>
    </filter>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<!-- Uncomment following filter to enable CORS-->
    <filter-mapping>
        <filter-name>cross-origin</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
1
2
3
4
5

重启geoserver