タグ付けされた質問 「fetch-api」

Fetch APIは、リダイレクトとCORSおよびサービスワーカーとの相互作用をより適切に管理しながら非同期HTTPリクエストを行うための、XHRの改良された代替品です。

11
フェッチ:POST jsonデータ
StackаэтотвопросестьответынаStack Overflowнарусском:какотправитьjsonнасерверfetch javascript?гсеговоряттолькоотом、какполучитьjson fetchを使用してJSONオブジェクトをPOSTしようとしています。 私が理解できることから、文字列化されたオブジェクトをリクエストの本文に添付する必要があります。例: fetch("/echo/json/", { headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' }, method: "POST", body: JSON.stringify({a: 1, b: 2}) }) .then(function(res){ console.log(res) }) .catch(function(res){ console.log(res) }) jsfiddleのjsonエコーを使用すると、送信したオブジェクト({a: 1, b: 2})が返されることが期待されますが、これは発生しません。Chromedevtoolsでは、リクエストの一部としてJSONも表示されないため、送信されません。

10
REST APIからデータを取得しようとしたときに、リクエストされたリソースに「Access-Control-Allow-Origin」ヘッダーがありません
HP AlmのREST APIからデータをフェッチしようとしています。それは小さなカールスクリプトでかなりうまく機能します-私は私のデータを取得します。 JavaScriptでこれを行うと、フェッチとES6(多かれ少なかれ)がより大きな問題になるようです。私はこのエラーメッセージを受け取り続けます: Fetch APIを読み込めません。プリフライト要求への応答がアクセス制御チェックに合格しません:要求されたリソースに「Access-Control-Allow-Origin」ヘッダーがありません。したがって、オリジン ' http://127.0.0.1:3000 'はアクセスを許可されません。応答のHTTPステータスコードは501でした。不透明な応答がニーズを満たす場合は、リクエストのモードを「no-cors」に設定して、CORSを無効にしてリソースをフェッチします。 これは、ローカルホストからデータを取得しようとしているためであり、ソリューションはCORSを使用する必要があることを理解しています。今私は実際にそれをやったと思ったが、どういうわけかそれは私がヘッダーに書いたものを無視するか、問題は別のものですか? それで、実装の問題はありますか?私はそれを間違っていますか?残念ながら、サーバーログを確認できません。私は本当にここで行き詰まっています。 function performSignIn() { let headers = new Headers(); headers.append('Content-Type', 'application/json'); headers.append('Accept', 'application/json'); headers.append('Access-Control-Allow-Origin', 'http://localhost:3000'); headers.append('Access-Control-Allow-Credentials', 'true'); headers.append('GET', 'POST', 'OPTIONS'); headers.append('Authorization', 'Basic ' + base64.encode(username + ":" + password)); fetch(sign_in, { //mode: 'no-cors', credentials: 'include', method: 'POST', headers: headers }) …


6
Cookieを使用したFetch API
新しいFetch APIを試していますが、Cookieに問題があります。具体的には、ログインが成功した後、将来のリクエストにCookieヘッダーが含まれますが、Fetchはそのヘッダーを無視しているようで、Fetchで行われたすべてのリクエストは不正です。 Fetchがまだ準備ができていないためか、FetchがCookieで機能しないためですか? 私はアプリをWebpackでビルドします。同じ問題のないReact NativeでもFetchを使用しています。
198 cookies  fetch-api 

4
不透明な応答とは何ですか?それはどのような目的に役立ちますか?
fetch古いWebサイトのURL を試しましたが、エラーが発生しました: Fetch API cannot load http://xyz. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://abc' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. 私はメッセージを理解し、不透明な応答を返すリクエストを実行しようとしました: fetch("http://xyz", {'mode': 'no-cors'}) わかりました、動作します...しかし、私はそれを読むことができません。= \ では、不透明な反応の目的は何でしょうか?
172 cors  fetch-api 

9
JSフェッチAPIでファイルをアップロードするにはどうすればよいですか?
私はまだ頭を包み込もうとしています。 ファイル入力を使用して、ユーザーにファイル(または複数)を選択させることができます。 <form> <div> <label>Select file to upload</label> <input type="file"> </div> <button type="submit">Convert</button> </form> そして、submitを使用してイベントをキャッチでき<fill in your event handler here>ます。しかし、一度実行したら、どうやってファイルを送信しますfetchか? fetch('/files', { method: 'post', // what goes here? What is the "body" for this? content-type header? }).then(/* whatever */);

5
モードでフェッチとパスを使用しようとしています:no-cors
http://catfacts-api.appspot.com/api/facts?number=99Postmanを介してこのエンドポイントをヒットすると、戻りますJSON さらに、create-react-appを使用しており、サーバー構成の設定を避けたいと考えています。 クライアントコードでfetch同じことを実行しようとしていますが、エラーが発生します。 要求されたリソースに「Access-Control-Allow-Origin」ヘッダーがありません。したがって、オリジン ' http:// localhost:3000 'はアクセスを許可されていません。不透明な応答がニーズを満たす場合は、リクエストのモードを「no-cors」に設定して、CORSを無効にしてリソースをフェッチします。 したがって、次のようにCORSを無効にするFetchにオブジェクトを渡そうとしています。 fetch('http://catfacts-api.appspot.com/api/facts?number=99', { mode: 'no-cors'}) .then(blob => blob.json()) .then(data => { console.table(data); return data; }) .catch(e => { console.log(e); return e; }); 興味深いことに、私が受け取るエラーは、実際にはこの関数の構文エラーです。fetch{mode: 'no-cors'}オブジェクトを削除して別のURLを指定すると、問題なく動作するため、実際のものが壊れているかどうかはわかりません。 また、オブジェクトを渡そうとしました{ mode: 'opaque'}が、これは上から元のエラーを返します。 CORSを無効にするだけで十分です。何が欠けていますか?

3
Fetch APIとXMLHttpRequest
Fetch APIはを使用してPromiseおり、どちらもサーバーへのAJAXリクエストを可能にすることを知っています。 Fetch APIにはいくつかの追加機能があり、それらはXMLHttpRequest(およびに基づいているため、Fetch APIポリフィルでは)使用できないことを読んだことがありますXHR。 Fetch APIにはどのような追加機能がありますか?

11
Fetch GETリクエストを使用してクエリ文字列を設定する
新しいFetch APIを使用しようとしています: 私はGETこのようなリクエストをしています: var request = new Request({ url: 'http://myapi.com/orders', method: 'GET' }); fetch(request); ただし、クエリ文字列をGETリクエストに追加する方法がわかりません。理想的には、いいね!にGETリクエストを送信できるようにしたいですURL。 'http://myapi.com/orders?order_id=1' では、のパラメータとしてjQuery渡すことでこれを行うことができます。新しいものでそれを行う同等の方法はありますか?{order_id: 1}data$.ajax()Fetch API

22
React Native fetch()ネットワーク要求が失敗しました
react-native init(RNバージョン0.29.1)を使用して真新しいプロジェクトを作成し、renderメソッドでフェッチをpublic facebookデモムービーAPIに入れると、がスローされますNetwork Request Failed。非常に役に立たないスタックトレースがあり、Chromeコンソールでネットワークリクエストをデバッグできません。これが私が送信しているフェッチです: fetch('http://facebook.github.io/react-native/movies.json') .then((response) => response.json()) .then((responseJson) => { return responseJson.movies; }) .catch((error) => { console.error(error); });

4
React NativeのFetchで認証ヘッダーを使用する
fetchReact Nativeで使用してProduct Hunt APIから情報を取得しようとしています。適切なアクセストークンを取得してStateに保存しましたが、GETリクエストのAuthorizationヘッダー内で渡すことができないようです。 ここに私がこれまで持っているものがあります: var Products = React.createClass({ getInitialState: function() { return { clientToken: false, loaded: false } }, componentWillMount: function () { fetch(api.token.link, api.token.object) .then((response) => response.json()) .then((responseData) => { console.log(responseData); this.setState({ clientToken: responseData.access_token, }); }) .then(() => { this.getPosts(); }) .done(); }, getPosts: function() { var obj …

15
HTTPリクエストがステータスコード0を返すとはどういう意味ですか?
フェッチやXMLHttpRequestなどのJavaScriptネットワークコール、またはその他のタイプのHTTPネットワークリクエストがHTTPステータスコード0で失敗するとはどういう意味ですか? 他のコードはHTTP仕様の3桁なので、これは有効なHTTPステータスコードではないようです。 テストとして、ネットワークのプラグを完全に抜いてみました。これは無関係である可能性がありますが、ステータスコード17003(IIRC)になり、ざっと検索すると「DNSサーバーの検索に失敗しました」と表示されます。 同じコードは一部の場所やシステムで正常に機能しますが、特定の環境ではステータスコード0で失敗し、responseTextが提供されません。 これは、インターネットURLへの典型的なHTTP POSTです。私が理解しているfile://が含まれていないため、Firefoxでの成功を示す0が返される場合があります。

8
フェッチによる基本認証?
フェッチを使用した単純な基本認証を記述したいのですが、401エラーが発生し続けます。誰かがコードの何が悪いのか教えてくれれば素晴らしいでしょう: let base64 = require('base-64'); let url = 'http://eu.httpbin.org/basic-auth/user/passwd'; let username = 'user'; let password = 'passwd'; let headers = new Headers(); //headers.append('Content-Type', 'text/json'); headers.append('Authorization', 'Basic' + base64.encode(username + ":" + password)); fetch(url, {method:'GET', headers: headers, //credentials: 'user:passwd' }) .then(response => response.json()) .then(json => console.log(json)); //.done(); function parseJSON(response) { return …

5
フェッチAPIを使用してフォームデータを投稿するにはどうすればよいですか?
私のコード: fetch("api/xxx", { body: new FormData(document.getElementById("form")), headers: { "Content-Type": "application/x-www-form-urlencoded", // "Content-Type": "multipart/form-data", }, method: "post", } 私はfetch apiを使用してフォームを投稿しようとしましたが、送信する本文は次のようになります。 -----------------------------114782935826962 Content-Disposition: form-data; name="email" test@example.com -----------------------------114782935826962 Content-Disposition: form-data; name="password" pw -----------------------------114782935826962-- (送信するたびに境界内の数値が変更される理由がわかりません...) 「Content-Type」:「application / x-www-form-urlencoded」でデータを送信したいのですが、どうすればよいですか?または、それを処理する必要がある場合、コントローラーのデータをどのようにデコードしますか? 誰が私の質問に答えるか、私は次の方法でそれができることを知っています: fetch("api/xxx", { body: "email=test@example.com&password=pw", headers: { "Content-Type": "application/x-www-form-urlencoded", }, method: "post", } 私が欲しいのは、jQueryの$( "#form")。serialize()(jQueryを使用しない)またはコントローラのmulitpart / …

4
.json()がPromiseを返すのはなぜですか?
私はfetch()最近、APIをいじり回していて、少し風変わりなことに気づきました。 let url = "http://jsonplaceholder.typicode.com/posts/6"; let iterator = fetch(url); iterator .then(response => { return { data: response.json(), status: response.status } }) .then(post => document.write(post.data)); ; post.dataPromiseオブジェクトを返します。 http://jsbin.com/wofulo/2/edit?js,output ただし、次のように記述されている場合: let url = "http://jsonplaceholder.typicode.com/posts/6"; let iterator = fetch(url); iterator .then(response => response.json()) .then(post => document.write(post.title)); ; postObjectこれは、title属性にアクセスできる標準です。 http://jsbin.com/wofulo/edit?js,output だから私の質問は、なぜresponse.jsonオブジェクトリテラルでプロミスを返すのですか?

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.