Cors issue with React

Question

I am calling a 3rd party API on which CORS access is I think already provided. When i am calling it via a simple node app with axios it works fine and provide the data.

const axios= require('axios');

let games = [];
let getTodayGames = () => {axios.get('http://data.nba.net/v2015/json/mobile_teams/nba/2017/scores/00_todays_scores.json')
    .then(function (response) {
        let result = response.data;
        console.log(result);
        games = result.gs.g;
        console.log(games[0].v.tn);
    })
    .catch(function (error) {
        console.log(error);
    });
};

getTodayGames();

But when i call it in a React App with axios also, it gives me CORS error:

Failed to load http://data.nba.net/v2015/json/mobile_teams/nba/2017/scores/00_todays_scores.json: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:8080' is therefore not allowed access.

class Games extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        games: []
    };
}

componentDidMount() {
    let url='http://data.nba.net/v2015/json/mobile_teams/nba/2017/scores/00_todays_scores.json';
    axios.get(url)
        .then(res => {
            const games = res.data;
            this.setState({ games });
        });
}
....

I read many responses in SO, but nothing solve the issue. I have no control on the API. The React app will be hosted in AWS S3 as a static web site (no server management), so I don't think the answers with proxy solutions will help. Thank you.

Check my answer [here](https://stackoverflow.com/questions/10636611/how-does-access-control-allow-origin-header-work/46774307#46774307) — Dhaval Jardosh, Oct 23 '17 at 22:44
`https://cors-anywhere.herokuapp.com/` + `Your API URL` : hopefully it will work :) — Dhaval Jardosh, Oct 23 '17 at 22:45
Thank you Dhaval. Appending this service to the API works well. — Alee, Oct 24 '17 at 05:54

score 0 · Answer 1 · answered Oct 23 '17 at 23:15

0

You will need to use a service that appends the proper CORS header. dhaval mentioned one in his comment there. Another is crossorigin.me

answered Oct 23 '17 at 23:15

rimraf

3,925
3
25
55

Thank you archae0pteryx. I use the service cors-anywhere provided by Dhaval and it works. I'll also try with crossorigin.me – Alee Oct 24 '17 at 05:58

score 0 · Answer 2 · answered Oct 24 '17 at 01:51

If you are going to serve a static website with no backend, you have no choice but to use a third party proxy server. CORS is initiated by the client's browser, you have no way around that. The whole point of CORS is to prevent cross site scripting attacks or session hijacking.

Cors issue with React

2 Answers2