Question

我创建了一个asp.net webapi并通过azure托管它。当我运行host/api/carparks时，这很好用。它在我运行ODATA查询字符串

时也有效

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

Google Chrome会根据我的需要将结果作为JSON返回。

Working JSON get example with Azure

我遇到的问题是，我需要创建一个“客户端”应用程序来可视化我的数据。我创建了一个非常简单的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（在浏览器中有效！）时，没有任何反应。

Working 'Client side' locally.

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

是否有需要更改的Azure设置？

Answer 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...
    }
}
对于origin参数，请使用您部署的URI   WebClient应用程序。这允许来自的跨源请求   WebClient，但仍然不允许所有其他跨域请求。   稍后，我将更详细地描述[EnableCors]的参数。

请勿在原始网址末尾添加正斜杠。

Answer 2

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

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

再次感谢 1快乐的乔：）

Json没有在azure工作，但在当地工作

2 个答案: