Question

我正在调用第三方API，我认为已经提供了CORS访问权限。当我通过一个带有axios的简单节点应用程序调用它时，它可以正常工作并提供数据。

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();

但是当我在带有axios的React App中调用它时，它给了我CORS错误：

无法加载http://data.nba.net/v2015/json/mobile_teams/nba/2017/scores/00_todays_scores.json：否＆＃39;访问控制 - 允许 - 来源＆＃39;标头出现在请求的资源上。起源＆＃39; http://127.0.0.1:8080＆＃39;因此不允许访问。

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 });
        });
}
....

我在SO中阅读了很多回复，但没有解决问题。我无法控制API。 React应用程序将作为静态网站（无服务器管理）托管在AWS S3中，因此我不认为代理解决方案的答案会有所帮助。谢谢。

Answer 1

您需要使用附加正确CORS标头的服务。达瓦尔在那里的评论中提到了一个。另一个是crossorigin.me

Answer 2

如果您要为没有后端的静态网站提供服务，您别无选择，只能使用第三方代理服务器。 CORS由客户端的浏览器启动，您无法解决这个问题。 CORS的重点是防止跨站点脚本攻击或会话劫持。

Cors发布了React

2 个答案: