1. 程式人生 > >No 'Access-Control-Allow-Origin' header is present on the requested resource', 跨域訪問的解決方法

No 'Access-Control-Allow-Origin' header is present on the requested resource', 跨域訪問的解決方法

1. 當請求不在同一域名下的資原始檔(ip地址+埠號)時,會報如下錯誤:
“No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:8080’ is therefore not allowed access.”,翻譯下,因為被請求的資源沒有設定 ‘Access-Control-Allow-Origin’,所以 從’http://localhost:8080’ 發起的請求不被允許。

3.解決辦法。
1.)針對上面的錯誤提示,我們肯定可以通過在被請求的資原始檔中新增 'Access-Control-Allow-Origin’來解決跨域問題。
(1)如果被請求的是靜態HTML檔案,則需要只需要在被請求的HTML檔案中加上一下標籤。

<meta http-equiv="Access-Control-Allow-Origin" content="*" />

(2)如果被請求的是java介面,則可以在響應頭中加上:

response.setHeader("Access-Control-Allow-Origin", "http://www.domain1.com"); 

(3)如果被請求的是.net介面,則可以在響應頭中加上:

Response.AddHeader("Access-Control-Allow-Origin", "*");

2.)另外一種方法就是從前端解決。前端可以通過jsonp請求的方式或者設定代理的方式解決。


(1)通過jsonp的方式。
跨域原理: 通常為了減輕web伺服器的負載,我們把js、css,img等靜態資源分離到另一臺獨立域名的伺服器上,在html頁面中再通過相應的標籤從不同域名下載入靜態資源,而被瀏覽器允許,基於此原理,我們可以通過動態建立script,再請求一個帶參網址實現跨域通訊。

原生實現:
 <script>
    var script = document.createElement('script');
    script.type = 'text/javascript';

    // 傳參並指定回撥執行函式為onBack
    script.src = 'http://www.domain2.com:8080/login?user=admin&callback=onBack';
    document.head.appendChild(script);

    // 回撥執行函式
    function onBack(res) {
        alert(JSON.stringify(res));
    }
 </script>
jquery實現:
$.ajax({
    url: 'http://www.domain2.com:8080/login',
    type: 'get',
    dataType: 'jsonp',  // 請求方式為jsonp
     crossDomain: true,
	 success: function(data) {},
    data: {}
});

(2)通過請求代理的方式。
跨域原理: 同源策略是瀏覽器的安全策略,不是HTTP協議的一部分。伺服器端呼叫HTTP介面只是使用HTTP協議,不會執行JS指令碼,不需要同源策略,也就不存在跨越問題。
以下提供java/.net跨域檔案的原始碼,請自行釋出使用。請求代理檔案原始碼地址:https://github.com/muziye2013/CrossDomainAccessProxy

a. 如果是.NET開發環境,請將下載的“DotNet”原始碼釋出為網站
在這裡插入圖片描述
並將網站的物理路徑,指向原始碼DotNet地址:
在這裡插入圖片描述
修改index.html頁面中被請求的資源,在瀏覽器中訪問index.html頁面進行測試。

 var testUrl="http://172.17.0.130/***/query";//修改測試服務地址

b.如果是Java開發環境,請將下載的“Java”原始碼放在tomcat網站下的webapps目錄下,
在這裡插入圖片描述
修改index.html頁面中被請求的資源,啟動tomcat,在瀏覽器中訪問index.html頁面進行測試。

以上,推薦使用第三種方式來進行配置,特別是對於前後端分離開發時,一勞永逸的解決跨域問題。