已解決:No 'Access-Control-Allow-Origin'跨域問題
阿新 • • 發佈:2020-06-10
問題分析:
這是常見的跨域請求問題,在前後端分離的專案中常見,前端專案中的請求路徑直接用後臺請求路徑(例如:http://192.168.1.1:8080/demo/getUser.do),但根據瀏覽器的網路請求規則,後臺Server是不允許這樣直接呼叫的(會被當黑客惡意攻擊給攔截掉)。從而導致該跨域請求被拒絕(如下圖)。
Access to XMLHttpRequest at 'http://192.168.1.1:8080/app/easypoi/importExcelFile' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
解決方式:
網上很多讓修改各種專案中的配置檔案但是不好使。其實:只需修改後臺Server(如java的tomcat)的一個過濾配置即可,即允許跨域請求;
在請求的server端(tomcat)的conf/web.xml 配置檔案中加入如下配置過濾器
(如web.xml中有多個filter時要把下面配置放在最前端)
<filter> <filter-name>CorsFilter</filter-name> <filter-class>org.apache.catalina.filters.CorsFilter</filter-class> <init-param> <param-name>cors.allowed.methods</param-name> <param-value>GET,POST,HEAD,OPTIONS,PUT</param-value> </init-param> <init-param> <param-name>cors.allowed.headers</param-name> <param-value>Access-Control-Allow-Origin,Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers</param-value> </init-param> <async-supported>true</async-supported> </filter> <filter-mapping> <filter-name>CorsFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping>
這樣在根源(後臺)上允許了跨域請求,同時也存在被黑客惡意注入導致伺服器癱瘓(內網或單機版除外)。
到此這篇關於已解決:No 'Access-Control-Allow-Origin'跨域問題的文章就介紹到這了,更多相關No 'Access-Control-Allow-Origin' 內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!