我正在编写一个基本函数,使用React中的Youtube Data API获取给定频道发布的最后10个Youtube视频。然而,我遇到了一个403错误,因为我的CORS标头缺少一个“Access Control Allow Origin”字段,尽管我的标头中包含一个字段。
var finalURL = `https://www.googleapis.com/youtube/v3/search?key=${OAUTH2_CLIENT_ID}&channelId=${channelId}&part=snippet,id&order-date&maxResults=${result}`;
var myHeaders = new Headers();
myHeaders.append("Access-Control-Allow-Origin", finalURL);
myHeaders.append("Access-Control-Allow-Origin", "*");
myHeaders.append("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
myHeaders.append("X-Requested-With", "XMLHttpRequest");
myHeaders.append( "Content-Type", "application/json");
var requestOptions = {
mode: 'cors',
method: 'GET',
headers: myHeaders,
redirect: 'follow'
};
我知道“Access Control Allow Origin”,“*”是不安全的,但我只是想在提高安全性之前运行任何东西。
load() {
fetch(finalURL, requestOptions)
.then((response) => response.json())
.then((responseJSON) => {
console.log(responseJSON);
const resultyt = responseJSON.items.map(object => "https://www.youtube.com/embed/" + object.id.videoId);
this.setState({ resultyt });
console.log(resultyt);
console.log(this.state.resultyt);
})
.catch((error) => {
console.log(error);
});
}
我试着完整地写下标题,以防我遗漏了范围问题,
fetch(finalURL, {
mode: 'cors',
method: 'GET',
headers: {
"Access-Control-Allow-Origin": finalURL,
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Headers": "Origin, X-Requested-With, Content-Type, Accept",
"X-Requested-With": "XMLHttpRequest",
"Content-Type": "application/json"
},
redirect: 'follow'
})
但没有效果。
我也尝试过使用类似的代理
https://cors-anywhere.herokuapp.com/
,
var proxyUrl = 'https://cors-anywhere.herokuapp.com/'
//...
fetch(proxyUrl + finalURL, requestOptions)
虽然这删除了“Access Control Allow Origin”错误并返回视频ID,但它会产生一个新的错误“Cross Origin Request Blocked:the Same Origin Policy disallow read the remote resource at data:text/plain;base64,Cg==。(原因:CORS Request not http)”
任何帮助或推荐的文档都将不胜感激。