モードでフェッチアンドパスを使用しようとしています:no-cors

200
dwww 2017-04-07 07:36.

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を無効にするだけでいいと思います。何が足りないのですか?

6 answers

349
sideshowbarker 2017-04-07 15:08.

mode: 'no-cors'魔法のように物事を機能させることはありません。実際、状況はさらに悪化します。これは、ブラウザに「フロントエンドのJavaScriptコードがすべての状況で応答の本文とヘッダーのコンテンツを参照しないようにブロックする」という効果があるためです。もちろん、あなたはそれをほとんど望んでいません。

フロントエンドJavaScriptからのクロスオリジンリクエストで発生することは、ブラウザがデフォルトでフロントエンドコードがリソースクロスオリジンにアクセスするのをブロックすることです。Access-Control-Allow-Originが応答に含まれている場合、ブラウザはそのブロックを緩和し、コードが応答にアクセスできるようにします。

ただし、サイトが応答でnoAccess-Control-Allow-Originを送信した場合、フロントエンドコードはそのサイトからの応答に直接アクセスできません。特に、指定して修正することはできませんmode: 'no-cors'(実際、フロントエンドコードが応答コンテンツにアクセスできないようにします)。

しかし、一つのことになる仕事:あなたはを通して、あなたのリクエストを送信する場合CORSプロキシ、次のように:

var proxyUrl = 'https://cors-anywhere.herokuapp.com/',
    targetUrl = 'http://catfacts-api.appspot.com/api/facts?number=99'
fetch(proxyUrl + targetUrl)
  .then(blob => blob.json())
  .then(data => {
    console.table(data);
    document.querySelector("pre").innerHTML = JSON.stringify(data, null, 2);
    return data;
  })
  .catch(e => {
    console.log(e);
    return e;
  });
<pre></pre>

注:https://cors-anywhere.herokuapp.comを使用しようとしたときにダウンしていることに気付いた場合は、5つのコマンドを使用して、文字通り2〜3分で独自のプロキシをHerokuに簡単にデプロイすることもできます。

git clone https://github.com/Rob--W/cors-anywhere.git
cd cors-anywhere/
npm install
heroku create
git push heroku master

これらのコマンドを実行すると、https://cryptic-headland-94862.herokuapp.com/などで独自のCORSAnywhereサーバーが実行されることになります。したがって、リクエストURLの前に。を付けるのではなく、https://cors-anywhere.herokuapp.com代わりに独自のインスタンスのURLを前に付けます。例:https://cryptic-headland-94862.herokuapp.com/https://example.com


http://catfacts-api.appspot.com/api/facts?number=99Postman経由でこのエンドポイントに到達できます

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORSは、Postmanで応答にアクセスできたとしても、ブラウザーがフロントエンドから応答のクロスオリジンにアクセスできない理由を説明しています。応答にAccess-Control-Allow-Origin応答ヘッダーが含まれていない限り、Webアプリで実行されるJavaScriptコード。

http://catfacts-api.appspot.com/api/facts?number=99にAccess-Control-Allow-Origin応答ヘッダーがないため、フロントエンドコードが応答のクロスオリジンにアクセスする方法はありません。

お使いのブラウザは正常に応答を取得でき、Postmanやブラウザのdevtoolsでも表示できますが、ブラウザが応答をコードに公開するわけではありません。Access-Control-Allow-Origin応答ヘッダーがないため、そうはなりません。したがって、代わりにプロキシを使用して取得する必要があります。

プロキシはそのサイトにリクエストを送信し、レスポンスを取得し、Access-Control-Allow-Originレスポンスヘッダーとその他の必要なCORSヘッダーを追加して、それをリクエストしているコードに返します。そして、Access-Control-Allow-Originヘッダーが追加されたその応答はブラウザーに表示されるものであるため、ブラウザーはフロントエンドコードに実際に応答にアクセスさせます。


だから私はCORSを無効にする私のフェッチにオブジェクトを渡そうとしています

あなたはそれをしたくありません。明確にするために、「CORSを無効にする」と言うときは、実際には同一生成元ポリシーを無効にすることを意味しているようです。CORS自体は、実際にはそれを行う方法です— CORSは、同一生成元ポリシーを緩める方法であり、制限する方法ではありません。

とにかく、ローカル環境だけで、ブラウザのランタイムフラグを設定してセキュリティを無効にし、安全でない方法で実行したり、ブラウザ拡張機能をローカルにインストールして同一生成元ポリシーを回避したりすることができますが、それでもすべてが可能です。ローカルであなたのためだけに状況を変えることです。

ローカルで何を変更しても、アプリを使用しようとしている他のユーザーは同一生成元ポリシーに遭遇することになり、アプリの他のユーザーに対してそれを無効にする方法はありません。

mode: 'no-cors'いくつかの限られた場合を除いて、実際に使用したくない場合がほとんどです。それでも、自分が何をしていて、どのような効果があるかを正確に知っている場合に限ります。これmode: 'no-cors'は、設定が実際にブラウザに指示するのは、「すべての状況で、フロントエンドのJavaScriptコードが応答の本文とヘッダーのコンテンツを調べないようにブロックする」ためです ほとんどの場合、それは明らかにあなたが望むものではありません。


あなたは時に限り例として考え使用することを検討したいmode: 'no-cors'、で答えを参照してください制限が不透明な応答に適用されますか?詳細については。その要点は、ケースが次のとおりであるということです。

  • あなたに別の原点からコンテンツを置くためにJavaScriptを使用している限られた場合には<script><link rel=stylesheet><img><video><audio><object><embed>、または<iframe>何らかの理由であなたが「ドン- (リソースの埋め込みクロスオリジンは、それらのために許可されているので、動作します)要素ドキュメントのマークアップでリソースURLを要素のhreforsrc属性として使用するだけでは、これを実行したい、または実行できません。

  • リソースを使用して実行したいのは、リソースをキャッシュすることだけである場合。回答でほのめかされているように、不透明な応答にはどのような制限が適用されますか?、実際に適用されるシナリオは、Service Workerを使用している場合です。この場合、関連するAPICache StorageAPIです。

しかし、これらの限られたケースでも、注意すべき重要な落とし穴がいくつかあります。不透明な応答にどのような制限が適用されますか?の回答を参照してください詳細については。


私もオブジェクトを渡そうとしました { mode: 'opaque'}

mode: 'opaque'リクエストモードはありません—opaque代わりに応答のプロパティであり、ブラウザはno-corsモードで送信されたリクエストからの応答にその不透明なプロパティを設定します。

しかし、ちなみに、不透明という言葉は、最終的に得られる応答の性質についてのかなり明白なシグナルです。「不透明」とは、それが見えないことを意味します。

6
dotNET 2019-07-18 10:18.

だから、あなたが私のようで、ローカルホストでLaravel APIからデータをフェッチしてVueフロントエンドで使用しようとしているウェブサイトを開発していて、この問題が発生した場合は、次のように解決しました。

  1. Laravelプロジェクトで、コマンドを実行しますphp artisan make:middleware Cors。これはapp/Http/Middleware/Cors.phpあなたのために作成します。
  2. 次のコードをhandles関数内に追加しますCors.php

    return $next($request)
        ->header('Access-Control-Allow-Origin', '*')
        ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
    
  3. app/Http/kernel.php、次のエントリを$routeMiddleware配列に追加します。

    ‘cors’ => \App\Http\Middleware\Cors::class
    

    (配列にはauthguestなどの他のエントリがあります。また、Laravelにもapp/Http/kernel.php別のエントリがあるため、これを実行していることを確認してくださいkernel.php

  4. 次のように、アクセスを許可するすべてのルートのルート登録にこのミドルウェアを追加します。

    Route::group(['middleware' => 'cors'], function () {
        Route::get('getData', 'v1\[email protected]');
        Route::get('getData2', 'v1\[email protected]');
    });
    
  5. Vueフロントエンドでは、このAPIをでmounted()はなく関数で呼び出すようにしてくださいdata()。また、通話でhttp://またはhttps://URLを使用するようにしてくださいfetch()

ピートヒューストンのブログ記事への完全なクレジット。

4
Really Nice Code 2019-04-13 03:38.

簡単な解決策:データを要求しているphpファイルの一番上に以下を追加します。

header("Access-Control-Allow-Origin: *");
2
Stuart Aitken 2018-12-24 03:06.

私にとっての解決策は、サーバー側で行うことでした

C#WebClientライブラリを使用してデータ(私の場合は画像データ)を取得し、クライアントに送り返しました。選択したサーバーサイド言語には、おそらく非常によく似たものがあります。

//Server side, api controller

[Route("api/ItemImage/GetItemImageFromURL")]
public IActionResult GetItemImageFromURL([FromQuery] string url)
{
    ItemImage image = new ItemImage();

    using(WebClient client = new WebClient()){

        image.Bytes = client.DownloadData(url);

        return Ok(image);
    }
}

独自のユースケースに合わせて調整できます。重要な点はclient.DownloadData()、CORSエラーなしで機能します。通常、CORSの問題はウェブサイト間でのみ発生するため、サーバーから「クロスサイト」リクエストを行っても問題ありません。

次に、Reactフェッチ呼び出しは次のように簡単です。

//React component

fetch(`api/ItemImage/GetItemImageFromURL?url=${imageURL}`, {            
        method: 'GET',
    })
    .then(resp => resp.json() as Promise<ItemImage>)
    .then(imgResponse => {

       // Do more stuff....
    )}
2
volna 2019-01-28 06:03.

非常に簡単な解決策(設定まで2分)は、からのlocal-ssl-proxyパッケージを使用することです。npm

使用法は非常に簡単です:
1。パッケージをインストールします: npm install -g local-ssl-proxy
2。local-serverマスクを実行している間、local-ssl-proxy --source 9001 --target 9000

PS:交換する--target 9000-- "number of your port"して--source 9001--source "number of your port +1"

2
Varnit Rohilla 2020-08-24 03:29.

Expressをバックエンドとして使用している場合は、corsをインストールし、インポートしてapp.use(cors());で使用するだけです。それが解決されない場合は、ポートを切り替えてみてください。ポート切り替え後、確実に解決します

Related questions

MORE COOL STUFF

「水曜日」シーズン1の中心には大きなミステリーがあります

「水曜日」シーズン1の中心には大きなミステリーがあります

Netflixの「水曜日」は、典型的な10代のドラマ以上のものであり、実際、シーズン1にはその中心に大きなミステリーがあります.

ボディーランゲージの専門家は、州訪問中にカミラ・パーカー・ボウルズが輝くことを可能にした微妙なケイト・ミドルトンの動きを指摘しています

ボディーランゲージの専門家は、州訪問中にカミラ・パーカー・ボウルズが輝くことを可能にした微妙なケイト・ミドルトンの動きを指摘しています

ケイト・ミドルトンは、州の夕食会と州の訪問中にカミラ・パーカー・ボウルズからスポットライトを奪いたくなかった、と専門家は言う.

一部のファンがハリー・スタイルズとオリビア・ワイルドの「非常に友好的な」休憩が永続的であることを望んでいる理由

一部のファンがハリー・スタイルズとオリビア・ワイルドの「非常に友好的な」休憩が永続的であることを望んでいる理由

一部のファンが、オリビア・ワイルドが彼女とハリー・スタイルズとの間の「難しい」が「非常に友好的」な分割を恒久的にすることを望んでいる理由を見つけてください.

エリザベス女王の死後、ケイト・ミドルトンはまだ「非常に困難な時期」を過ごしている、と王室の専門家が明らかにする 

エリザベス女王の死後、ケイト・ミドルトンはまだ「非常に困難な時期」を過ごしている、と王室の専門家が明らかにする&nbsp;

エリザベス女王の死後、ケイト・ミドルトンが舞台裏で「非常に困難な時期」を過ごしていたと伝えられている理由を調べてください.

セントヘレナのジェイコブのはしごを登るのは、気弱な人向けではありません

セントヘレナのジェイコブのはしごを登るのは、気弱な人向けではありません

セント ヘレナ島のジェイコブズ ラダーは 699 段の真っ直ぐ上る階段で、頂上に到達すると証明書が発行されるほどの難易度です。

The Secrets of Airline Travel Quiz

The Secrets of Airline Travel Quiz

Air travel is far more than getting from point A to point B safely. How much do you know about the million little details that go into flying on airplanes?

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

バイオニック読書はあなたをより速く読むことができますか?

バイオニック読書はあなたをより速く読むことができますか?

BionicReadingアプリの人気が爆発的に高まっています。しかし、それは本当にあなたを速読術にすることができますか?

パンデミックは終わったかもしれないが、Covid-19 は終わっていない

パンデミックは終わったかもしれないが、Covid-19 は終わっていない

2021 年 6 月 8 日にニューヨーク市で開催された covid-19 パンデミックで亡くなった人々の命を偲び、祝うために、ネーミング ザ ロスト メモリアルズが主催するイベントと行進の最中に、グリーンウッド墓地の正門から記念碑がぶら下がっています。週末、ジョー・バイデン大統領は、covid-19 パンデミックの終息を宣言しました。これは、過去 2 年以上にわたり、公の場でそうするための長い列の中で最新のものです。

デビル・イン・オハイオの予告編は、エミリー・デシャネルもオハイオにいることを明らかにしています

デビル・イン・オハイオの予告編は、エミリー・デシャネルもオハイオにいることを明らかにしています

オハイオ州のエミリー・デシャネル みんな早く来て、ボーンズが帰ってきた!まあ、ショーボーンズではなく、彼女を演じた俳優. エミリー・デシャネルに最後に会ってからしばらく経ちました.Emily Deschanel は、長期にわたるプロシージャルな Bones の Temperance “Bones” Brennan としてよく知られています。

ドナルド・トランプはFBIのマー・ア・ラーゴ襲撃映像をリリースする予定ですか?

ドナルド・トランプはFBIのマー・ア・ラーゴ襲撃映像をリリースする予定ですか?

どうやら、ドナルド・トランプに近い人々は、今月初めにFBIによって家宅捜索された彼のMar-a-Lago財産からの映像を公開するよう彼に勧めています. 前大統領はテープを公開するかどうかを確認していませんが、息子はフォックス・ニュースにそうなるだろうと語った.

Andor は、他の Star Wars ショーから大きな距離を置きます。

Andor は、他の Star Wars ショーから大きな距離を置きます。

アンドールの一場面。数十年前、ジョージ・ルーカスがスター・ウォーズのテレビ番組を制作するのを妨げた主な理由は、お金でした。

ケイト・ミドルトンとウィリアム王子は、彼らが子供たちと行っているスパイをテーマにした活動を共有しています

ケイト・ミドルトンとウィリアム王子は、彼らが子供たちと行っているスパイをテーマにした活動を共有しています

ケイト・ミドルトンとウィリアム王子は、子供向けのパズルの本の序文を書き、ジョージ王子、シャーロット王女、ルイ王子と一緒にテキストを読むと述べた.

事故で押しつぶされたスイカは、動物を喜ばせ水分補給するために野生生物保護団体に寄付されました

事故で押しつぶされたスイカは、動物を喜ばせ水分補給するために野生生物保護団体に寄付されました

Yak's Produce は、数十個のつぶれたメロンを野生動物のリハビリ専門家であるレスリー グリーンと彼女のルイジアナ州の救助施設で暮らす 42 匹の動物に寄付しました。

デミ・ロヴァートは、新しいミュージシャンのボーイフレンドと「幸せで健康的な関係」にあります: ソース

デミ・ロヴァートは、新しいミュージシャンのボーイフレンドと「幸せで健康的な関係」にあります: ソース

8 枚目のスタジオ アルバムのリリースに向けて準備を進めているデミ ロヴァートは、「スーパー グレート ガイ」と付き合っている、と情報筋は PEOPLE に確認しています。

Plathville の Kim と Olivia Plath が数年ぶりに言葉を交わすことへようこそ

Plathville の Kim と Olivia Plath が数年ぶりに言葉を交わすことへようこそ

イーサン プラスの誕生日のお祝いは、TLC のウェルカム トゥ プラスビルのシーズン 4 のフィナーレで、戦争中の母親のキム プラスと妻のオリビア プラスを結びつけました。

仕事の生産性を高める 8 つのシンプルなホーム オフィスのセットアップのアイデア

仕事の生産性を高める 8 つのシンプルなホーム オフィスのセットアップのアイデア

ホームオフィスのセットアップ術を極めよう!AppExert の開発者は、家族全員が一緒にいる場合でも、在宅勤務の技術を習得しています。祖父や曽祖父が共同家族で暮らしていた頃の記憶がよみがえりました。

2022 年、私たちのデジタル ライフはどこで終わり、「リアル ライフ」はどこから始まるのでしょうか?

20 年前のタイムトラベラーでさえ、日常生活におけるデジタルおよびインターネットベースのサービスの重要性に驚くことでしょう。MySpace、eBay、Napster などのプラットフォームは、高速化に焦点を合わせた世界がどのようなものになるかを示してくれました。

ニューロマーケティングの秘密科学

ニューロマーケティングの秘密科学

マーケティング担当者が人間の欲望を操作するために使用する、最先端の (気味が悪いと言う人もいます) メソッドを探ります。カートをいっぱいにして 3 桁の領収書を持って店を出る前に、ほんの数点の商品を買いに行ったことはありませんか? あなたは一人じゃない。

地理情報システムの日: GIS 開発者として学ぶべき最高の技術スタック

地理情報システムの日: GIS 開発者として学ぶべき最高の技術スタック

私たちが住んでいる世界を確実に理解するには、データが必要です。ただし、空間参照がない場合、このデータは地理的コンテキストがないと役に立たなくなる可能性があります。

Language