1

I am in a project of making a RSS feed in SPFx and using React.js and TypeScript.

When I try to retrieve XML data from a news site, the console gives error:

enter image description here

Because it complains about CORS, so I tried using a CORS extension in Chrome and enable CORS but the I get these errors:

When enabling CORS

The code looks like this for my attempts to fetch an XML page from a Swedish news site:

    import * as React from 'react';
import styles from '../RssApp.module.scss';
import { IRssAppProps } from './IRssAppProps';
import { escape } from '@microsoft/sp-lodash-subset';
import {IRssAppState} from './IRssAppState'

export default class RssApp extends React.Component<IRssAppProps, IRssAppState> {
  constructor(props: IRssAppProps){
    super(props);
    this.state = {

        title: 'afton',
        link: ''

    }
  }

  private async FetchDataFromXml(){
    var request = new XMLHttpRequest();
    request.onreadystatechange = () =>{
      if(request.readyState == 4 && request.status == 200){
        var myXML = JSON.parse(request.responseText);
        for(var i = 0; i < 1; i++){
          this.setState({

              title: myXML.items[i].title,
              link: myXML.items[i].link

          });
        }
      }
    }
    request.open("GET", "https://www.aftonbladet.se/nyheter/rss.xml", true)
    request.send();
    //console.log(this.FetchDataFromXml);
  }

  componentDidMount(){
    {this.FetchDataFromXml()}
  }

  public render(): React.ReactElement<IRssAppProps> {
    return (
      <div className={ styles.rssApp }>
        <div className={ styles.container }>
          <div className={ styles.row }>
            <div className={ styles.column }>
              <span className={ styles.title }>{this.state.title}</span>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

And nothing except my hard coded step "afton" is showing in the webpart. Would apprieciate of someone could help me. Is there another way to solve this? What am I doing wrong?

Thanks in advance.

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.