类型错误:无法在“窗口”上执行“获取”:值无效

IT技术 javascript reactjs fetch
2021-05-19 01:57:06

我尝试使用 fetch 使用 react 从后端调用,而不使用库(例如 Axios)。所以我创建了这个函数:

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);
        }
    })

并像这样称呼它

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

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

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);
            }
        );
    }
};

这是我的完整组件:

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>
    )
}

}

但是当我尝试运行它时,出现了这样的错误

类型错误:无法在“窗口”上执行“获取”:值无效

有没有人知道我的代码有什么问题?当我使用“POST”方法时该功能有效,但当我使用“GET”方法时它不起作用

4个回答

当我尝试Authorization向我的 fetch 调用添加标头时,这也发生在我身上在我的情况下,它是由标题字符串中的换行符引起的,即Bearer:\nsomelong-token. 将新行更改为空格解决了问题。

对我来说,我在标题对象有一个无效字符我不小心包含了“:”,这会引发所描述的错误。在 chrome 控制台中很难直观地看到。希望它可以帮助某人。

{ 'Authorization:':'Bearer etc...' }

我在将带有换行符的字符串传递到标头对象时遇到了这个问题,例如:

const myString = 'this is a string \nand this is a new line';
headers: {
    'Content-Type': 'application/json',
    'Authorization': `Bearer ${token}`,
    'subscriptionId': myString
}

嘿,我在尝试使用 react 中的 fetch 方法加载数据时遇到了同样的问题。

const response = await fetch('/graphql', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    query
  })
});

我在导致错误的 Content-Type 中有一个额外的空间,所以请寻找相同的空间。