JQuery EasyUI Datagrid 适用于一种 Web 服务，但不适用于另一种（相同代码相同服务器）

Question

我正在使用 JQuery EasyUI 的数据网格是一个非常基本的实现。

从我的 previous SO post 开始（我设法让 JQuery EasyUI 的数据网格使用 JavaScript 方法从我的网络服务加载数据）。我现在有一个非常奇怪的问题，我无法理解。

简而言之，一个 Web 服务有效，另一个无效，但代码基本相同，并且两个 Web 服务都托管在同一台服务器上并使用 CORS，因此我们没有同源问题。我真的看不出代码和它们的执行之间有任何明显的区别。一个有效，另一个无效……我只能假设这与服务器 API 响应有关，但结构匹配，它们都是在同一站点和同一服务器上生成的……都很奇怪...我正在使用 .NET Web API 2 输出 JSON.

这是工作版本：

<table id="DGInProgress" class="easyui-datagrid"
        data-options="singleSelect:true,collapsible:true,url:'https://www.driverlive.co.uk/rest/api/PushMessage/GetPushDriverMessagesList?DeviceId=a99f8a977696bfb9&DateFrom=2014-10-27T00:00:00&DateTo=2015-11-11T00:00:00',method:'get'">
    <thead>
        <tr>
            <th data-options="field:'MessageDated',width:80">Dated</th>
            <th data-options="field:'PushNotificationMessage',width:100">Message</th>
        </tr>
    </thead>
</table>

这是没有的代码

<table id="DGInProgress" class="easyui-datagrid"
        data-options="singleSelect:true,collapsible:true,url:'https://www.driverlive.co.uk/dispatch/api/BookingsInProgressLite/GetBookingsLite?dateTimeFrom=2014-01-01&dateTimeTo=2015-03-01&limit=100&json=true',method:'get'">
    <thead>
        <tr>
            <th data-options="field:'BookingReference',width:80">BookingReference</th>
        </tr>
    </thead>
</table>

如您所见，两者都遵循相同的标记，当我查看 Web 服务时 JSON 它也遵循相同的结构。

此外，Fiddler 显示已发出 'get' 请求并返回了 JSON。那么为什么网格会显示 PushMessages API 的数据而不是 Bookings API 的数据？...

Answer 1

非工作响应 header 不允许 CORS - 它缺少 Access-Control-Allow-Origin header

Answer 2

@Kyle 提供了为什么这不起作用的答案，但我想列出另一个答案来详细说明原因和解决方案。

这里有两个问题。

首先，我最初跟随 this article 进行第一个项目并且一切顺利。我在第二个项目中浏览了它，虽然我已经通过 Nuget 包管理安装了 CORS，但我未能添加以下行：

// New code
config.EnableCors();

在 AppStart WebApiConfig.cs

我这样做之后，以为一切都会好起来的，但还是不行。

我尝试删除对 CORS 的引用，清理、重建、添加它并重复……仍然没有任何乐趣。然后我 re-referenced 整个 Web API 2 库包括 CORS，但仍然没有任何乐趣。我最终使用了包管理器控制台 window，并在文本中注意到对 Json 包的依赖需要我重新启动 Visual Studio。

我这样做了，然后它开始工作了。

另一个 'Gotcha' 是我正在测试 CORS 现在是否导致 Access-Control-Allow-Origin header 在 Fiddler 中显示。但是，我是通过浏览器直接访问 API 来这样做的。这从未显示 'Access-Control-Allow-Origin' header 所以我误以为它仍然无法正常工作。我需要通过 Web 应用程序请求服务才能看到 'Access-Control-Allow-Origin' header 出现在 Fiddler 中。

JQuery EasyUI Datagrid 适用于一种 Web 服务，但不适用于另一种（相同代码相同服务器）

JQuery EasyUI Datagrid works with one web service but not another (same code same servers)

jquery

json

jquery-easyui

asp.net-web-api