Json 不是通过 azure 工作，而是在本地工作答案

【问题标题】：Json get not working through azure but working locallyJson 不是通过 azure 工作，而是在本地工作
【发布时间】：2016-04-18 18:05:36
【问题描述】：

我创建了一个 asp.net webapi 并通过 azure 托管它。当我运行host/api/carparks 时，这工作正常。当我运行 ODATA 查询字符串时它也可以工作

host/api/carparks?$Filter%20eq%20%27Liverpool%27

Google chrome 以 JSON 格式返回我想要的结果。

我遇到的问题是，我需要创建一个“客户端”应用程序来可视化我的数据。我创建了一个非常简单的 for 循环来返回我的数据以进行测试，一旦我返回了数据，我就可以开始创建我的应用程序。

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<script type="text/javascript">

    function getStations() {

        var town = document.getElementById("town").value;

        var stationList = "<p>";

        var uri = "http://localhost:38852/api/carparks?$filter=Town%20eq%20%27" + town + "%27";
        $.getJSON(uri,
             function (data) {
                 $('#here_data').empty(); // Clear existing text.
                 // Loop through the list of products.
                 $.each(data, function (key, val) {

                     stationList += val.Name + '<br />';

                 });
                 stationList += "</p>";
                 document.getElementById("here_data").innerHTML =     stationList;
            });
     }
     $(document).ready(getStations);
</script>
</head>
<body onload="getStations()">
<h1>Stations API</h1>
<p>Enter town</p>
<input type="text" id="town" value="Derby" />
<input type="button" value="Find Stations" onclick="getStations()" />
<div id="here_data">
<p>Car parks go here</p>
</div>
</body>
</html>

当我在本地运行我的 web api 时，我的客户端应用程序运行良好，但是当我将 getJSON 请求 URI 更改为我的天蓝色的（在浏览器中工作！）时没有任何反应。

我尝试将我的客户端应用程序上传到 azure 并以这种方式进行测试，但没有：(

是否有任何 Azure 设置需要更改？

【问题讨论】：

什么都没有发生？你的函数运行了吗？您能在浏览器的网络工具中看到 HTTP 请求吗？您能在浏览器的 JavaScript 控制台中看到错误吗？如果你在那里添加一个.fail 作为described in the documentation 会发生什么？ Azure 托管代码中的 URL 是否正确，包括端口？
@mason 感谢您的回复。该函数确实运行但它不返回任何数据。我试图包含另一个显示发生了什么的图像，但它不允许我，因为我是堆栈溢出 n00b。我刚刚将“客户端”html 页面上传到我的 web api 上，它也可以按我的意愿工作。但是，它不能在单独的 Web 应用程序中运行。
您确实没有回答我在之前评论中提出的大部分问题。请重新阅读并确保解决所有问题。
@mason 嗨对不起，这有帮助吗？ imgur.com/kq1xcX6 azure 代码中的 URL 是正确的。
HTTP 304 是一个not modified 状态码。

标签： asp.net azure asp.net-web-api azure-web-app-service

【解决方案1】：

看起来很像跨域问题。

当您直接在浏览器中调用服务时不会出现此问题，但仅当您从不同域（localhost 与 *.azurewebsites.net）发出 Ajax 调用时才会出现此问题。

如果您想通过来自不同域的 Ajax 调用访问您的 Web Api 服务，您需要启用跨域资源共享 (CORS)。

这里有一篇详细的文章： http://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api

引用自链接：

Install-Package Microsoft.AspNet.WebApi.Cors
打开文件 App_Start/WebApiConfig.cs。将以下代码添加到 WebApiConfig.Register 方法。
public static class WebApiConfig
{
    public static void Register(HttpConfiguration config)
    {
        // New code
        config.EnableCors();

        config.Routes.MapHttpRoute(
            name: "DefaultApi",
            routeTemplate: "api/{controller}/{id}",
            defaults: new { id = RouteParameter.Optional }
        );
    }
}
接下来，将 [EnableCors] 属性添加到 TestController 类：

使用 System.Net.Http；使用 System.Web.Http；使用 System.Web.Http.Cors;
namespace WebService.Controllers
{
    [EnableCors(origins: "http://mywebclient.azurewebsites.net", headers: "*", methods: "*")]
    public class TestController : ApiController
    {
        // Controller methods not shown...
    }
}
对于 origins 参数，使用您部署的 URI WebClient 应用程序。这允许来自的跨域请求 WebClient，同时仍然不允许所有其他跨域请求。稍后，我将更详细地描述 [EnableCors] 的参数。

不要在源 URL 的末尾包含正斜杠。

【讨论】：

感谢您的回复，当我靠近我的电脑时，我会确保我尝试此操作并通知您。
您可以通过 Azure 门户设置 CORS 选项 - CORS 位于“设置”边栏选项卡上。
@viperguynaz 谢谢，我在 azure 门户中更改了此选项。不幸的是，它并没有解决这个问题。
@florian-lim 我正在尝试您的方法，但是您对测试控制器是什么意思？对不起，我是新手。谢谢

【解决方案2】：

感谢@viperguynaz 和@florian，我已经解决了我的问题。我更改了 Azure 门户中的 CORS 选项。（当我第一次这样做时，我没有删除 URL 末尾的正斜杠）。我删除了斜线，它可以工作。

我还使用了@florian 提供的信息来帮助我更多地了解 CORS。

再次感谢 1 快乐的乔 :)

【讨论】：

这个答案真的帮助了我，因为我正在部署一个 node.JS 应用程序，我允许在我的应用程序中跨域，但这还不够。我还必须通过 Azure 门户并将其设置在那里。这就像双重安全，我觉得很奇怪；这种检查应该在应用程序级别进行，不是吗？