2012-05-29 129 views
3

我在ExtJS中使用JSON存儲並從ASP.net Web服務獲取數據。它成功地返回數據,如果我在同一個域中使用它,但在跨域它返回一個錯誤:無法從跨域AJAX請求獲取JSON響應

XMLHTTPREQUEST Access-Control-Origin Header is not allowed by the Origin

這裏是我的代碼:

var myStore = new Ext.data.JsonStore({ 
    // Load data at once 
    autoLoad: true, 

    // Override default http proxy settings 
    proxy: new Ext.data.HttpProxy({ 
     // Call web service method using GET syntax 
     type:'ajax', 
     url: path+'SelectIncidentList', 
     restful:true, 

     // Ask for Json response 
     headers: {'Content-type': 'application/json'}, 
     reader: { 
      type: 'json', 
      root: 'd' 
     }, 
    }), 

    id: 'incidentid', 

    // Fields declaration 
    fields: ['incidentid','occured','headline','source','enteredby','bodyintro','webaddress','location1','location2','location3','location4','image','incidenttypeid','incidentsubtypeid'] 
}); 

*編輯*

基於我得到的答案,我改變了我的代碼使用JSONP。但是我遇到了另一個問題。這些變化給我的ExtJS的代碼:

var myStore = new Ext.data.JsonStore({ 
autoLoad: true, 

// Override default http proxy settings 
proxy: new Ext.data.proxy.JsonP({ 
    type:'jsonp', 
    url: path+'SelectoccurList', 
    headers: {'Content-type': 'application/json'}, 
    reader: { 
     type: 'json', 
     root: 'd' 
    }, 
}), 
id: 'occurid', 

// Fields declaration 
fields: ['occurid','occured','headline','source','enteredby','bodyintro','webaddress','location1','location2','location3','location4','image','occurtypeid','occursubtypeid'] 
}); 

我遇到了以下錯誤:

<?xml version="1.0" encoding="utf-8"?> 
**SelectOccurList:-1Resource interpreted as Script but transferred with MIME type  text/xml. 
SelectOccurList:1SyntaxError: Unexpected token '<'** 
<ArrayOfOccurData xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns="http://tempuri.org/"> 
<OccurData> 
    <occurid>22</occurid> 
    <occured>2012-05-26T04:33:53-04:00</occured> 
    <headline>headline</headline> 
    <source>content</source> 
<enteredby /> 
<bodyintro>content</bodyintro> 
<webaddress /> 
<location1>29 -156.364</location1> 
<location2 /> 
<location3 /> 
<location4 /> 
<image>url of iamge</image> 
<occurtypeid>0</occurtypeid> 
<occursubtypeid>0</occursubtypeid> 
</OccurData> 
<OccurData> 
<occurid>23</occurid> 
<occured>2012-05-26T15:41:52-04:00</occured> 
<headline>headline</headline> 
<source>test content</source> 
<enteredby /> 
<bodyintro>test content</bodyintro> 
<webaddress /> 
<location1>27.75974 -82.67853</location1> 
<location2 /> 
<location3 /> 
<location4 /> 
    <image>url of image</image> 
<occurtypeid /> 
<occursubtypeid /> 
</OccurData> 
<OccurData> 
    <occurid>24</occurid> 
    <occured>test</occured> 
    <headline /> 
    <source /> 
    <enteredby /> 
    <bodyintro /> 
    <webaddress /> 
    <location1 /> 
    <location2 /> 
    <location3 /> 
    <location4 /> 
    <image /> 
    <occurtypeid>0</occurtypeid> 
    <occursubtypeid>0</occursubtypeid> 
</OccurData> 
<OccurData> 
<occurid>25</occurid> 
<occured>Testing</occured> 
<headline>Testing 28 05 </headline> 
<source>Dummy</source> 
<enteredby>XYZ</enteredby> 
<bodyintro>This occur is dummy</bodyintro> 
<webaddress>http://</webaddress> 
<location1>5cd41415-5c60-4cbd-a6f3-05330b368a41</location1> 
<location2 /> 
<location3 /> 
<location4 /> 
<image /> 
<occurtypeid>0</occurtypeid> 
<occursubtypeid>0</occursubtypeid> 
+1

你看過這個嗎? https://developer.mozilla.org/En/HTTP_Access_Control –

回答

4

這正是你想要的使用爲JsonP proxy,它使用的腳本標籤+回調函數解決相同的域名瀏覽器限制。鏈接頭文檔通過示例代碼完全解釋了它,包括一些基本的服務器實現。

另一種選擇是實際代理服務器上的調用 - 即,Ajax代理調用服務器,然後服務器調用遠程服務器並將標準JSON響應格式化回客戶端。你不能直接從客戶端撥打電話到遠程服務器。

0

您可以將您的服務器配置爲設置「access-control-」標題。 https://developer.mozilla.org/en/http_access_control

+0

是的,但在你做這個之前務必注意[瀏覽器兼容性](https://developer.mozilla.org/en/http_access_control#Browser_compatibility)解決方案 –