簡(jiǎn)簡(jiǎn)單單，解決 GeoServer 的跨域（CORS）問(wèn)題

前言

先貼一張常見(jiàn)的報(bào)錯(cuò)信息：
在這里插入圖片描述






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

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

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

什么意思呢？簡(jiǎn)單講，就是來(lái)自站點(diǎn)A的代碼腳本訪問(wèn)另一個(gè)不同的站點(diǎn)B的資源，那么如何定義站點(diǎn)A站點(diǎn)B是不同的？

MDN給出的定義如下：用URL

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

所以再看文章開(kāi)頭的那個(gè)報(bào)錯(cuò)信息，現(xiàn)在就可以理解了，127.0.0.1:5500和127.0.0.1:8080屬于不同站點(diǎn)資源，報(bào)錯(cuò)是因?yàn)榘l(fā)生了跨域請(qǐng)求。
在這里插入圖片描述

如何解決

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

平臺(tái)無(wú)關(guān)的bin版本在這個(gè)路徑下：\webapps\geoserver\WEB-INF

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

用任意一種文本編輯器打開(kāi)它，找到如下兩個(gè)片段：

 <!-- 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就行了：
在這里插入圖片描述