CORS无法与Azure移动服务.NET后端一起使用

Question

we are running into a permissions problem and what ever page we look at we can't seem to get it working. We have two parts. The mobile service in Azure and the webpage (client). Webservice is called " https://mobileservice.azure-mobile.net/tables/program .... and the client webpage is called " http://azure-webservicesclient.azurewebsites.net ".

We enabled on " https://mobileservice.azure-mobile.net "

<system.webServer>
   <httpProtocol>
     <customHeaders>
       <add name="Access-Control-Allow-Origin" value="*" />
     </customHeaders>
   </httpProtocol>
 <system.webServer>

But this does not seem to work, it still give a error: 404 (not found) No access-control-allow-origin' header is present on the requested source. We also followed the tutorial " http://www.codeguru.com/csharp/.net/net_asp/using-cross-origin-resource-sharing-cors-in-asp.net-web-api.html " but same result.

Please see here our code, any one any ideas what is wrong?

    <!-- WinJS code -->
    <script src='http://ajax.aspnetcdn.com/ajax/mobileservices/MobileServices.Web-1.1.2.min.js'></script>
    <script>
    $(function () {var client = new WindowsAzure.MobileServiceClient('https://mobileservice.azure-mobile.net/', '*****KEY********'),

        todoItemTable = client.getTable('program');
       console.log(todoItemTable.read());

            // Read current data and rebuild UI.
            // If you plan to generate complex UIs like this, consider using a JavaScript templating library.
            function refreshTodoItems() {
                var query = todoItemTable.where({ id_program: 21 });

                query.read().then(function (todoItems) {
                    //var listItems = $.map(todoItems, function (item) {
                    //    return $('<li>')
                    //        .attr('data-todoitem-id', item.id)
                    //        .append($('<button class="item-delete">Delete</button>'))
                    //        .append($('<div>').append($('<input class="item-text">').val(item.text)));
                    //});
                    console.log(todoItems);
                    //$('#todo-items').empty().append(listItems).toggle(listItems.length > 0);
                    //$('#summary').html('<strong>' + todoItems.length + '</strong> item(s)');
                }, handleError);

            }



            // On initial load, start by fetching the current data
        //    refreshTodoItems();
        });
    </script>

Answer 1

To enable CORS with Azure Mobile Services, you use the ASP.NET Web API CORS NuGet package:

http://www.nuget.org/packages/Microsoft.AspNet.WebApi.Cors/5.1.2

At the moment you have to enable it using this trick:

https://gist.github.com/HenrikFrystykNielsen/6c934be6c6c8fa9e4bc8

We will soon provide baked-in support for CORS so that you won't have to enable it yourself.

Hope this helps,

Henrik