這篇文章主要介紹了已解決:No 'Access-Control-Allow-Origin' 跨域,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨着小編來一起學習學習吧
問題分析:
這是常見的跨域請求問題,在前后端分離的項目中常見,前端項目中的請求路徑直接用后台請求路徑(例如: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時要把下面配置放在最前端)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<
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' 內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持腳本之家!