web-dev-qa-db-ja.com

TypeError：「ウィンドウ」で「フェッチ」の実行に失敗しました：無効な値

Lib（Axiosなど）なしで、reactを使用してバックエンドから呼び出すためにfetchを使用しようとしました。だから私はこの関数を作成しました：

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

}

しかし、私はそれを実行しようとしたとき、私はこのようなエラーが発生しました

TypeError：「ウィンドウ」で「フェッチ」の実行に失敗しました：無効な値

私のコードの何が問題なのか知っている人はいますか？この関数は「POST」メソッドを使用すると機能しますが、「GET」メソッドを使用すると機能しません

javascriptreactjsfetch
14
Raihan Parlaungan

これは、フェッチ呼び出しにAuthorizationヘッダーを追加しようとしたときにも起こりました。私の場合、ヘッダー文字列の改行文字、つまりBearer:\nsomelong-token。新しい行をスペースに変更することで問題は解決しました。

6
tfwright

たとえば、改行文字を含む文字列をヘッダーオブジェクトに渡すときにこれがありました。

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

私は同じ問題を抱えていましたが、Angular 7で作業していたので、次のようなInterceptorサービスを使用していました。

// headerservice.ts
public intercept() {
    const token = Cookies.get('token');
    this.Language = Cookies.get('language');
    this.headers = new HttpHeaders(
      {
        Authorization: 'JWT ' + token,
        'Accept-Language': this.Language
      }
    );
    return this.headers;
  }

  //other file 
   this.headers = this.headersService.intercept();

しかし、フェッチを行っている他のファイルでは機能しないため、サービスを削除し、ヘッダーを関数内に直接配置すると機能します！このような：

const token = Cookies.get('token');
const language = Cookies.get('language');
const headers = { 
 Authorization: 'JWT ' + token,
'Accept-Language': language
}
const fetchParams = { method: 'GET',
           headers: (headers) };
fetch(url, fetchParams)
1
Mariel Quezada

このエラーは私にも起こりましたが、状況は異なります。他の誰かがこの問題を抱えている場合に備えて、共有したいと思います。

HTTPでファイルをアップロードしようとすると、「TypeError：「ウィンドウ」で「フェッチ」を実行できませんでした：無効な値」というエラーが表示されましたPOST FormDataを使用せず。この問題を解決するには、FormDataオブジェクトを使用し、プロパティとファイル自体を追加しました。

let formData = new FormData();
formData.append('name', fileName);
formData.append('data', file);

その後、fetchを使用してPOSTメソッドでファイルを送信しました。擬似コードは次のとおりです。

const options = {method: 'POST', formData};
fetch('http://www.someURL.com/upload', options);
0
Eugenijus S.