ajax - 无法从跨域 AJAX 请求中获取 JSON 响应

Question

我在 ExtJS 中使用 JSON 存储并从 ASP.net Web 服务获取数据。如果我在同域中使用它，它会成功返回数据，但在跨域中会返回错误:

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>

Answer 1

这正是您要使用的 JsonP proxy for，它使用脚本标签+回调函数来绕过相同域浏览器的限制。链接的 header 文档通过示例代码对其进行了全面解释，包括一些基本的服务器实现。

另一种选择是在您的服务器上实际代理调用——即，Ajax 代理调用您的服务器，然后调用远程服务器并将标准 JSON 响应格式化返回给您的客户端。您只是不能直接从客户端调用远程服务器。