簡簡單單，解決 GeoServer 的跨域（CORS）問題

前言

先貼一張常見的報錯信息：
在這里插入圖片描述






相信很多同學(xué)在WebGIS開發(fā)中經(jīng)常遇到。這個問題在各種社區(qū)里也是被問了很多次了，解決辦法也不盡相同，那么這個CORS錯誤到底是個啥意思？怎么解決呢？
跨域資源共享(CORS)

首先說說CORS這個東西：以下是MDN關(guān)于CORS的解釋

跨域資源共享(CORS) 是一種機(jī)制，它使用額外的 HTTP 頭來告訴瀏覽器  讓運行在一個 origin (domain) 上的Web應(yīng)用被準(zhǔn)許訪問來自不同源服務(wù)器上的指定的資源。當(dāng)一個資源從與該資源本身所在的服務(wù)器不同的域、協(xié)議或端口請求一個資源時，資源會發(fā)起一個跨域 HTTP 請求。
比如，站點 http://domain-a.com 的某 HTML 頁面通過 <img> 的 src 請求 http://domain-b.com/image.jpg。網(wǎng)絡(luò)上的許多頁面都會加載來自不同域的CSS樣式表，圖像和腳本等資源。

什么意思呢？簡單講，就是來自站點A的代碼腳本訪問另一個不同的站點B的資源，那么如何定義站點A站點B是不同的？

MDN給出的定義如下：用URL

http://store.company.com/dir/page.html
代表的源A去訪問下表的B，前面兩個是同源，后面三種形式都不是同源的，屬于跨域HTTP請求CORS。

所以再看文章開頭的那個報錯信息，現(xiàn)在就可以理解了，127.0.0.1:5500和127.0.0.1:8080屬于不同站點資源，報錯是因為發(fā)生了跨域請求。
在這里插入圖片描述

如何解決

一句話：需要修改GeoServer的配置文件

平臺無關(guān)的bin版本在這個路徑下：\webapps\geoserver\WEB-INF

容器版本參考一下這個路徑，修改這下面的：web.xml

用任意一種文本編輯器打開它，找到如下兩個片段：

 <!-- Uncomment following filter to enable CORS 
       <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>
       -->

       <!-- Uncomment following filter to enable CORS 
        <filter-mapping>
            <filter-name>cross-origin</filter-name>
            <url-pattern>/*</url-pattern>
        </filter-mapping>
       -->

去掉注釋：

       <!-- Uncomment following filter to enable CORS  -->
       <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>
      

       <!-- Uncomment following filter to enable CORS    -->
        <filter-mapping>
            <filter-name>cross-origin</filter-name>
            <url-pattern>/*</url-pattern>
        </filter-mapping>

之后重啟GeoServer就行了：
在這里插入圖片描述