0

I am developing a SharePoint hosted app with React JS for SharePoint Online. I am Using Typescript and web pack for the same. I am able to get items from the Lists from App web without any issue with the below code. But getting the 403 Error(Failed to load resource: the server responded with a status of 403 ()) when i am trying to get elements from the HOST web. I hope this because of Cross domain call. Can anyone guide me how to do cross domain calls with XMLHttpRequest in react for SharePoint Hosted app.

import * as React from 'react';

export interface IReactGetItemsProps {
    description: string;
    siteurl: string;
}
export interface IReactGetItemsState {
    items: [
        {
            "Title": "",
            "Email": "",
            "MobileNumber": "",
            "Address": ""
        }]
}
export default class ReactSP extends React.Component<IReactGetItemsProps, IReactGetItemsState> {
    //debugger;
    public constructor(props: IReactGetItemsProps, state: IReactGetItemsState) {
        super(props);
        this.state = {
            items: [
                {
                    "Title": "",
                    "Email": "",
                    "MobileNumber": "",
                    "Address": ""
                }
            ]
        };
    }
    componentDidMount() {
        this.RetrieveSPData();
    }
    RetrieveSPData() {
        var reactHandler = this;
        var spRequest = new XMLHttpRequest();
       // spRequest.open('GET', "/sites/SakateCopyPaste/SharePointAddIn4/_api/web/lists/getbytitle('Test')/items", true);
        spRequest.open('GET', "https://tarundev.sharepoint.com/sites/SakateCopyPaste/_api/web/lists/getbytitle('AddressBook')/items", true);
        spRequest.setRequestHeader("Accept", "application/json");
        spRequest.onreadystatechange = function () {
            if (spRequest.readyState === 4 && spRequest.status === 200) {
                var result = JSON.parse(spRequest.responseText);
                reactHandler.setState({
                    items: result.value
                });
            }
            else if (spRequest.readyState === 4 && spRequest.status !== 200) {
                console.log('Error Occured !');
            }
        };
        spRequest.send();
    }
    render() {
        debugger;
        return (
            <div >
                <div>

                </div>
                <br></br>
                <br></br>
                <div> Demo : Retrieve SharePoint List Items using React JS  </div>
                <br></br>
                <div >
                    <div > Quarterly Car Sales Data </div>
                    <div  >
                        <div>Title</div>
                        <div >Title </div>
                        <div >Title</div>
                        <div >Title</div>
                        <div >Title</div>
                    </div>
                    {this.state.items.map(function (item, key) {
                        return (<div key={key}>
                            <div >{item.Title}</div>                            
                        </div>);
                    })}

                </div>
            </div>

        );
    }
}   
  • did you give correct permissions in the appmanifest.xml file ? – Gautam Sheth Oct 13 '17 at 6:46
  • yes web level Full control – TARUN Oct 13 '17 at 6:47
  • ok try with site collection read and check – Gautam Sheth Oct 13 '17 at 6:49
  • Checked. no luck same issue. – TARUN Oct 13 '17 at 6:58
  • Any sugesstions please – TARUN Oct 13 '17 at 10:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.