TypeError:无法在“窗口"上执行“获取":无效值 [英] TypeError: Failed to execute 'fetch' on 'Window': Invalid value

问题描述

我尝试使用 fetch 从后端调用 react，没有库(例如 Axios).所以我创建了这个函数:

导出函数 api(url, method, body, isHeaderContentType,isRequestHeaderAuthentication,header, succesHandler, errorHandler) {常量前缀 = '链接';console.log("url:",前缀+url);常量内容类型 = isHeaderContentType ?{'内容类型':'应用程序/json'，} : {};const auth = isRequestHeaderAuthentication?{授权:`Bearer ${AuthUtils.getTokenUser}`，}: {};获取(前缀+网址，{方法，标题:{...内容类型，...认证，...标题，},协议:'http:'，身体，}).then(响应 => {response.json().then(json => {如果(response.ok){console.log("方法", json);如果(成功处理程序){成功处理程序(json)}} 别的 {返回 Promise.reject(json)}})}).catch(错误 => {console.log("error",`${url} ${err}`);如果(错误处理程序){错误处理程序(错误)；}})

}并这样称呼它

api(`链接`，得到"，空值，真的，真的，空值，响应=>{this.setState({profile:response.data})},错误=>{console.log('error', err);});

我在这个函数中调用了我的 api():

getProfileUser = () =>{if (!isUserAuthenticated()){history.push('/signin')}别的 {api(`链接`，得到"，空值，真的，真的，空值，响应=>{this.setState({profile:response.data})},错误=>{console.log('error', err);});}};

这是我的完整组件:

export default class Profile extends Component {构造函数(道具){超级(道具)；这个.state = {轮廓:[]}}getProfileUser = () =>{if (!isUserAuthenticated()){一些代码}别的 {api(`链接`，得到"，空值，真的，真的，空值，响应=>{this.setState({profile:response.data})},错误=>{console.log('error', err);});}};组件DidMount() {this.getProfileUser();}使成为(){返回(
你好</div>)}

}

但是当我尝试运行它时，我收到了这样的错误

<块引用>

TypeError: 无法在 'Window' 上执行 'fetch': 无效值

有人知道我的代码有什么问题吗?该功能在我使用POST"方法时有效，但在我使用GET"方法时无效

解决方案

当我尝试将 Authorization 标头添加到我的 fetch 调用时，我也遇到了这种情况.在我的情况下，它是由标题字符串中的换行符引起的，即 Bearer: somelong-token.将新行更改为空格即可解决问题.

I've tried to use fetch to call from backend using react, without libs (such as Axios). So I created this function:

export function api(url, method, body, isHeaderContentType,isRequestHeaderAuthentication,header, succesHandler, errorHandler) {
const prefix = 'link';
console.log("url:",prefix+url);
const contentType = isHeaderContentType ? {
    'Content-Type': 'application/json',
} : {};
const auth = isRequestHeaderAuthentication
    ? {
        Authorization: `Bearer ${AuthUtils.getTokenUser}`,
    }
    : {};
fetch(prefix + url, {
    method,
    headers: {
        ...contentType,
        ...auth,
        ...header,

    },
    protocol:'http:',
    body,
})
    .then(response => {
        response.json().then(json => {
            if (response.ok) {
                console.log("method", json);
                if (succesHandler) {
                    succesHandler(json)
                }
            } else {
                return Promise.reject(json)
            }
        })
    })
    .catch(err => {
        console.log("error",`${url}  ${err}`);
        if (errorHandler) {
            errorHandler(err);
        }
    })

} and call it like this

api(
            `link`,
            "GET",
            null,
            true,
            true,
            null,
            response => {
                this.setState({profile:response.data})
            },
            err => {
                console.log('error', err);
            }
        );

i call my api() inside this function:

getProfileUser = () =>{
    if (!isUserAuthenticated()){
        history.push('/signin')
    }else {
        api(
            `link`,
            "GET",
            null,
            true,
            true,
            null,
            response => {
                this.setState({profile:response.data})
            },
            err => {
                console.log('error', err);
            }
        );
    }
};

this is my full component:

export default class Profile extends Component {
constructor(props) {
    super(props);
    this.state = {
        profile:[]
    }

}
getProfileUser = () =>{
    if (!isUserAuthenticated()){
        someCode
    }else {
        api(
            `link`,
            "GET",
            null,
            true,
            true,
            null,
            response => {
                this.setState({profile:response.data})
            },
            err => {
                console.log('error', err);
            }
        );
    }
};

componentDidMount() {
    this.getProfileUser();
}

render(){
    return(
        <div>
            hello 
        </div>
    )
}

}

but when i tried to run it, i got an error like this

TypeError: Failed to execute 'fetch' on 'Window': Invalid value

Is there anyone who knows what's wrong with my code? The function works when I use the "POST" method, but it doesn't work when I use "GET" method

解决方案

This also happened to me when I tried to add an Authorization header to my fetch calls. In my case it was caused by a newline character in the header string, i.e. Bearer: somelong-token. Changing the new line to a space solved the problem.

这篇关于TypeError:无法在“窗口"上执行“获取":无效值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！