React cross domain issue corrupted

[alstn2468]

React cross domain issue corrupted

Dependencies

"dependencies": {
    "billboard-top-100": "^2.5.5",
    "prop-types": "^15.7.2",
    "react": "^16.10.2",
    "react-dom": "^16.10.2",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.2.0",
    "styled-components": "^4.4.0",
    "styled-reset": "^4.0.2"
  },

Code

componentDidMount() {
        try {
            this.setState({ loading: true });
            getChart((err, chart) => {
                if (err) console.log(err);
                else console.log(chart);
            });
        } catch (e) {
            console.log(e);
        } finally {
            this.setState({ loading: false });
        }
    }

Response

TypeError: Failed to fetch

Access to fetch at 'http://www.billboard.com/charts/hot-100/' from origin 'http://127.0.0.1:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

[spidgorny]

IMHO, you can't overrule CORS in the browser. But you can ignore it in your own server. I'd make an express.js based server running on localhost which would do the Billboard data fetching and your React app would fetch data from your own localhost API (proxy).