如何使用带CORS的fetch API

我为一家酒吧构建了一个无服务器的react网站,啤酒列表通过fetch请求检索(以XML形式):

  componentDidMount() {
        const url = 'http://****************/taplist.xml'
        const proxyURL = 'https://cors-anywhere.herokuapp.com/'

        this.setState({
          isLoading: true
        })
        fetch(proxyURL + url)
        .then(res => res.text())
        .then(beerXML => {
          let beerJs = new XMLParser().parseFromString(beerXML)
          this.setState({
            isLoading:false,
            beers: beerJs
          })
        })

      }

这运行良好,但最近API一直在失败。没有返回任何数据,浏览器中出现以下错误:

Home.jsx:27 GET https://cors-anywhere.herokuapp.com/http://************/taplist.xml 403 (Forbidden)
bundle.js:1 Uncaught (in promise) TypeError: Cannot read property 'value' of undefined
    at bundle.js:1
    at Array.map (<anonymous>)
    at e.value (bundle.js:1)
    at e.value (bundle.js:1)
    at Home.jsx:30

我怀疑“Cors anywhere”代理出现故障,因此没有返回任何数据。我记录了变量 beerXML 控制台本应显示啤酒数据,但什么也没显示。

有人能建议对我当前的API调用进行调整,或者建议使用新的代理吗?或者任何其他可能解决这个问题的方法?

以下是负责获取和呈现数据的整个组件:

import React from 'react'
import './styles.css'
import hashi_logo_2 from './Photos/hashi_logo_2.png'
import TileList from './TileList'
import OnNextList from './OnNextList'
import Nav from './Nav'
import twitter_logo from './Photos/twitter_logo.png'
import facebook_logo from './Photos/facebook_logo.png'
const XMLParser = require('react-xml-parser')

class Home extends React.Component {
    constructor() {
        super()
        this.state = {
          beers:[],
          isLoading:false
        }
      }

    componentDidMount() {
        const url = 'http://******************/taplist.xml'
        const proxyURL = 'https://cors-anywhere.herokuapp.com/'

        this.setState({
          isLoading: true
        })
        fetch(proxyURL + url)
        .then(res => res.text())
        .then(beerXML => {
          console.log(`this is beerJs: ${beerXML}`)
          let beerJs = new XMLParser().parseFromString(beerXML)
          this.setState({
            isLoading:false,
            beers: beerJs
          })
        })

      }

    render() {

    return (
        <div className = 'home'>
            <div className = 'home-nav'>
                <Nav/>
            </div>
              <main>
                  <div className='main__image'>
                      <img src= {hashi_logo_2}/>
                  </div>
              </main>
                <div>
                  {this.state.isLoading === false ?
                    <TileList beerList = {this.state.beers}/> 
                    :
                    <h1 className = 'loading-h1'>Loading tap beers....</h1>
                  }
                </div>
                <div className = 'on-next-section'>
                <OnNextList beerList = {this.state.beers}/>
                </div>
                <footer>
                  <a href = 'https://twitter.com/*********'>
                  <img className = 'img-footer' src = {twitter_logo} ></img>
                  </a>
                  <a href ='https://www.facebook.com/*******'>
                  <img className = 'img-footer' src = {facebook_logo} ></img>
                  </a>
                </footer>

        </div>
    )
}
}

export default Home

谢谢