I am getting access denied error for the following code of sharepoint 2013 app

sharepoint.stackexchange https://sharepoint.stackexchange.com/questions/137455

Question

Here is the code on default.aspx page,

<%-- The following 4 lines are ASP.NET directives needed when using SharePoint components --%>

<%@ Page Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" MasterPageFile="~masterurl/default.master" Language="C#" %>

<%@ Register TagPrefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%-- The markup and script in the following Content element will be placed in the <head> of the page --%>
<asp:Content ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
    <!--<script type="text/javascript" src="../Scripts/jquery-1.9.1.min.js"></script>-->
    <script type="text/javascript" src="../Scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
    <script type="text/javascript" src="/_layouts/15/sp.js"></script>


    <script type="text/javascript" src="../Scripts/angular.js"></script>
     <script type="text/javascript" src="../Scripts/angular-route.js"></script>



    <meta name="WebPartPageExpansion" content="full" />

    <!-- Add your CSS styles to the following file -->
    <link rel="Stylesheet" type="text/css" href="../Content/App.css" />

    <!-- Add your JavaScript to the following file -->
    <script type="text/javascript" src="../Scripts/App.js"></script>

    <script type="text/javascript">

        var myAngApp = angular.module('SharePointAngApp', []);

        myAngApp.controller('spCustomerController', function ($scope, $http) {
            $http({
                method: 'GET',
                url: "http://sp13dev:3030/_api/web/lists/getByTitle('InfoList')/items?$select=Title,Employee,Company",
                headers: { "Accept": "application/json;odata=verbose" }
            }).success(function (data, status, headers, config) {
                alert("success");
                $scope.customers = data.d.results;
            }).error(function (data, status, headers, config) {
                alert("fail");
            });
        });

        myAngApp.config(function ($httpProvider) {
                delete $httpProvider.defaults.headers.common['X-Requested-With'];
        });

    </script>


</asp:Content>

<%-- The markup in the following Content element will be placed in the TitleArea of the page --%>
<asp:Content ContentPlaceHolderID="PlaceHolderPageTitleInTitleArea" runat="server">
    Page Title
</asp:Content>

<%-- The markup and script in the following Content element will be placed in the <body> of the page --%>
<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">

    <div>
        <p id="message">
            <!-- The following content will be replaced with the user name when you run the app - see App.js -->
            initializing...
        </p>
    </div><br />


   <div ng-app="SharePointAngApp" class="row">
    <div ng-controller="spCustomerController" class="span10">
        <table class="table table-condensed table-hover">
            <tr>
                <th>Title</th>
                <th>Employee</th>
                <th>Company</th>

            </tr>
            <tr ng-repeat="customer in customers">
                <td>{{customer.Title}}</td>
                <td>{{customer.Employee}}</td>
                <td>{{customer.Company}}</td>
                </tr>
        </table>
    </div>
</div>

</asp:Content>

And here is the App.css code and there is nothing on App.js,

/* Place custom styles below */
table, td, th {
    border: 1px solid green;
}

th {
    background-color: green;
    color: white;
}

I think it is not making http call to server. I tried it hard, issue is not getting resolved. Somebody please tell me how to make a call to a sharepoint server using angular.js since it is not retrieving the data. And showing some cross domain & authentication problem.

Was it helpful?

Solution

We need to include hostweb and appweb URL's when we deploy the sharepoint hosted apps since we are reading a list from an app it creates the cross domain issue, Hence we need to pass the different URL as shown below,

url: appweburl + "/_api/SP.AppContextSite(@target)/web/lists/getByTitle('Customers')/items" + "?@target='" + hostweburl + "'" + "&$select=CustomerID,CustomerName,CustomerAddress,CustomerState,CustomerCountry"‌​,

and pass those list fields and make a http call to the server using angularjs.

Licensed under: CC-BY-SA with attribution
Not affiliated with sharepoint.stackexchange
scroll top