CORS issues fetching data from ishare (sharepoint api )

CORS issues fetching data from ishare (sharepoint api )
0

#1

i am developing a mashup on a qlik server where i have no resources to build a separate sever with a database. so i only have a frontend (html pages) where i want to fetch a list from sharepoint api but the CORS wont let me do that. any way to circumvent this ?


#2

Without knowing your app, this is a bit difficult to answer, but as a quick workaround you could use a CORS proxy like

https://cors-anywhere.herokuapp.com/
or
https://crossorigin.me

However you shouldn’t use it with a production build.


#3

thanks DanileSubat, i tried that but it didn’t work


#4
<!DOCTYPE html>
<html>

<head>
    <script crossorigin src="https://unpkg.com/[email protected]/dist/react.js"></script>
    <script crossorigin src="https://unpkg.com/[email protected]/dist/react-dom.js"></script>
    <script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
    <style></style>
</head>

<body>
    <div id="container"></div>
    <script type="text/babel">
    var destination = document.querySelector("#container");
    class LinksClass extends React.Component {
        debugger;
        constructor() {
            super();
            this.state = {
                Links: [
                    {
                        "Link_x0020_Title": "",
                        "Title": ""
                    }
                ]
            };
        }
        componentDidMount() {
            debugger;
            this.RetrieveLinksData();
        }
        RetrieveLinksData() {
            var reactHandler = this;
            var objHeaders = {
                type: "GET",
                headers: {
                    "accept": "application/json;odata=verbose"
                },
                mode: 'cors',
                cache: 'default',
                credentials: 'include'
            }
            // const url = 'https://isharenew.dhl.com/sites/S_P/NEXT_20/_api/lists/getbytitle('NewsArticles')/Items';
            // fetch("https://sharepointonline01.sharepoint.com/sites/dev/_api/web/lists/getbytitle('ReactDemo')/items",
            fetch("https://isharenew.xyz.com/sites/S_P/NEXT_20/_api/lists/getbytitle('NewsArticles')/Items",
                objHeaders).then(function (response) {
                return response.json()
            })
            .then(function (json) {
                console.log(json);
                var results = json.d.results;
                reactHandler.setState({Links: results});    
            })
            .catch(function (ex) {
                console.log('parsing failed', ex)
            })
        }
        render() {
            debugger;
            return (
                <div>
                    <h4>Links</h4>
                    <ul>
                        {this
                            .state
                            .Links
                            .map(function (item, key) {
                                return (
                                    <li key={key}>
                                        <a href={item.Link_x0020_Title.Url}>
                                            {item.title}
                                        </a>
                                    </li>
                                );
                            })
                          }
                    </ul>
                </div>                  
            );
        }
    }
    ReactDOM.render(
      <LinksClass/>,
      document.getElementById('container')
    );
</script>
</body>

</html>