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>
);
}
}從源 'http://localhost:3000' 訪問 'https://api.steampowered.com/ISteamApps/GetAppList/v0001/' 已被 CORS 策略阻止：No 'Access-Control-Allow-Origin'請求的資源上存在標頭。如果不透明回應滿足您的需求，請將請求的模式設定為“no-cors”以在禁用 CORS 的情況下獲取資源。Games.js：14 GET https://api.steampowered.com/ISteamApps/GetAppList/v0001/網:: ERR_FAILED
uj5u.com熱心網友回復：
這不是反應特定的錯誤。讓我解釋一下這里發生了什么。
對 CORS 的簡化解釋：（更多在這里）
CORS 是一種機制，它允許服務器url=https://api.steampowered.com/ISteamApps/GetAppList/v0001/僅在請求來自特定域/來源時為 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)
}來自developer.google.com：
不透明回應是針對不同來源的資源發出的請求，該請求不回傳 CORS 標頭。對于不透明的回應，我們將無法讀取回傳的資料或查看請求的狀態，這意味著我們無法檢查請求是否成功。
您可以使用代理來繞過這一點。雖然如果您擁有上述 url，您可以配置以授予自己必要的訪問權限。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/321699.html
標籤：javascript 反应 接口
上一篇：身份驗證令牌確實獲取API的問題