代码之家  ›  专栏  ›  技术社区  ›  Red-Brick-Builder

Access Control Allow Origin标头缺失,需要包含标头

  •  0
  • Red-Brick-Builder  · 技术社区  · 2 年前

    我正在编写一个基本函数,使用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)”

    任何帮助或推荐的文档都将不胜感激。

    0 回复  |  直到 2 年前