0 

 import React, { Component } from 'react'


export default class Games extends Component {
state ={
    loading: true,
    
    
    
}
   async componentDidMount(){
   
    const url="https://api.steampowered.com/ISteamApps/GetAppList/v0001/";
    const response = await fetch(url);
    const data= await response.json();
    this.setState({game: data.applist[0],loading:false});
    
}
render() {
    return (
        <div>
            {this.state.loading||!this.state.game?(<div>loading...</div> ):(
            <div>
                <div>{this.state.game.appid}</div>
                <div>{this.state.game.name}</div>
            </div>)}
        </div>
    );
}
}

CORS 策略已阻止从源“http://localhost:3000”获取“https://api.steampowered.com/ISteamApps/GetAppList/v0001/”的访问权限：否“Access-Control-Allow-Origin”请求的资源上存在标头。如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。Games.js:14获取https://api.steampowered.com/ISteamApps/GetAppList/v0001/net::ERR_FAILED

4

1 回答 1

0

这不是特定于反应的错误。让我解释一下这里发生了什么。

对 CORS 的简化解释：（更多在这里）

url=https://api.steampowered.com/ISteamApps/GetAppList/v0001/CORS 是一种机制，它允许服务器仅在请求来自特定域/源时才向api（在您的情况下）发送回响应。

例如，使用CORS我们可以允许服务器仅响应来自www.steampowered.com来源的 API 请求。（而不是本地主机和其他来源）

现在来到：

如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源

这意味着您仍然可以获得类型为 的响应opaque。运行它并查看响应：

async function apiCall() {
    const url = 'https://api.steampowered.com/ISteamApps/GetAppList/v0001/'
    const response = await fetch(url, {
        mode: 'no-cors',
    })
    console.log(response)
}

try {
    apiCall()
} catch (e) {
    console.log('Err is', e.message)
}

来自developers.google.com：

不透明响应是针对不返回 CORS 标头的不同来源的资源发出的请求。对于不透明的响应，我们将无法读取返回的数据或查看请求的状态，这意味着我们无法检查请求是否成功。

您可以使用代理来绕过它。尽管如果您拥有上述网址，您可以配置为授予自己必要的访问权限。

于 2021-10-16T19:48:54.697 回答