モードでフェッチアンドパスを使用しようとしています: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

ケイト・ブランシェットは3日間一緒に夫と一緒に寝て、25年経ってもまだ夫と結婚しています

ケイト・ブランシェットは3日間一緒に夫と一緒に寝て、25年経ってもまだ夫と結婚しています

ケイト・ブランシェットは、夫に会ったとき、典型的な交際のアドバイスに逆らいました。

マイケルシーンが非営利の俳優である理由

マイケルシーンが非営利の俳優である理由

マイケルシーンは非営利の俳優ですが、それは正確にはどういう意味ですか?

ホールマークスターのコリンエッグレスフィールドがRomaDramaLiveでスリル満点のファンと出会う![エクスクルーシブ]

ホールマークスターのコリンエッグレスフィールドがRomaDramaLiveでスリル満点のファンと出会う![エクスクルーシブ]

特徴的なスターのコリン・エッグレスフィールドは、RomaDrama Liveでのスリル満点のファンとの出会いについて料理しました!加えて、大会での彼のINSPIREプログラム。

「たどりつけば」をオンラインでストリーミングできない理由

「たどりつけば」をオンラインでストリーミングできない理由

ノーザンエクスポージャーが90年代の最も人気のある番組の1つになった理由を確認するには、Blu-rayまたはDVDプレーヤーをほこりで払う必要があります。

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

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

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

ドミニカのボイリング湖:アクセスは簡単ではありませんが、ハイキングする価値があります

ドミニカのボイリング湖:アクセスは簡単ではありませんが、ハイキングする価値があります

ドミニカのボイリング湖は、世界で2番目に大きいボイリング湖です。そこにたどり着くまでのトレッキングは大変で長いですが、努力する価値は十分にあります。

私たちの水をきれいに保つのを助けるためにあなたの髪を寄付してください

私たちの水をきれいに保つのを助けるためにあなたの髪を寄付してください

サロンからのヘアトリミングや個人的な寄付は、油流出を吸収して環境を保護するのに役立つマットとして再利用できます。

ホワイトハウスの最も記憶に残る結婚式を見てください

ホワイトハウスの最も記憶に残る結婚式を見てください

過去200年以上の間にホワイトハウスで結婚したのはほんの数人です。彼らは誰でしたか、そしてそこで結婚式を獲得するために何が必要ですか?

この太陽に優しいショルダーバッグで一日中外出してください

この太陽に優しいショルダーバッグで一日中外出してください

画像クレジット:Richard Mackney / Flickrトラベリングライトは必需品だけを運ぶことを意味するかもしれませんが、デバイスを補充する方法がない外出先では、接続を維持するのが難しくなる可能性があります。それはあなたがすべての生き物の快適さやクールなガジェットを捨てる必要があるという意味ではありません、ただあなたがいくつかのより小さなものを手に入れる必要があるということです、そしておそらくあなた自身をジュースに保つためにいくつかの、例えば非正統的な充電装置を使うでしょう。

ミッドセンチュリーリゾートのポストカードが廃墟に変わるのを見る

ミッドセンチュリーリゾートのポストカードが廃墟に変わるのを見る

ニューヨーク州スプリンググレンにある放棄されたホモワックロッジのボーリング場。キャッツキル南部のこの地域は、ニューヨーク市からのユダヤ人の行楽客に人気があることから、かつてはボルシチベルトとして知られていました。

ブルックリンスレートの美しいボードをあなたのテーブルに座らせましょう

ブルックリンスレートの美しいボードをあなたのテーブルに座らせましょう

ブルックリンスレートブルックリンスレートのマグカップとコースターの賞賛をすでに歌っており、それらの食器製品も同様に堅実です。ブルックリンスレートは、さまざまなサイズとテクスチャのスレートの完全な採石場を販売しています。一部のオプションは赤でも利用できます。上で見ることができるように、彼らは同様にカスタマイズをします。

遺伝子分析により、私たちの体内に生息する微生物の99%がカタログ化されていないことが明らかになりました

遺伝子分析により、私たちの体内に生息する微生物の99%がカタログ化されていないことが明らかになりました

画像:Juan Gaertner / Shutterstock私たちの体の内部は、私たちの細胞とは何の関係もない何十億もの微生物が住んでいる本物の生態系です。これがまだ少し気になることではなかったかのように、これらの微生物の99%が研究されたことがないことがわかりました。

Zendaya Wishes Boyfriend Tom Holland Happy Birthday with Cuddly Photo: He 'Makes Me the Happiest'

Zendaya Wishes Boyfriend Tom Holland Happy Birthday with Cuddly Photo: He 'Makes Me the Happiest'

Zendaya shared a sweet photo in honor of boyfriend Tom Holland's 26th birthday Wednesday

小さな女性:脳卒中を患った後に病院から解放されたアトランタのジューシーな赤ちゃん:「まだ癒し」

小さな女性:脳卒中を患った後に病院から解放されたアトランタのジューシーな赤ちゃん:「まだ癒し」

シーレン「Ms.JuicyBaby」ピアソンは、先月脳卒中で入院した後、「もう一度たくさんのことをする方法を学ばなければならない」ため、言語療法を受けていることを明らかにしました。

エマストーンは彼女のクリフサイドマリブビーチハウスを420万ドルでリストアップしています—中を見てください!

エマストーンは彼女のクリフサイドマリブビーチハウスを420万ドルでリストアップしています—中を見てください!

オスカー受賞者の世紀半ばの家には、3つのベッドルーム、2つのバス、オーシャンフロントの景色があります。

ジーニー・メイ・ジェンキンスは、母乳育児の経験の中で、彼女は「本当に、本当に落ち込んでいる」と言います

ジーニー・メイ・ジェンキンスは、母乳育児の経験の中で、彼女は「本当に、本当に落ち込んでいる」と言います

ジーニー・メイ・ジェンキンスは、生後4か月の娘、モナコに母乳育児をしていると語った。

投資ノート:Bioscout AU$300万シード

投資ノート:Bioscout AU$300万シード

Bioscoutは、農家を運転席に置くという使命を負っています。Artesian(GrainInnovate)やUniseedと並んで、最新のシードラウンドでチームを支援できることをうれしく思います。問題真菌症による重大な作物の損失は、農民にとって試練であることが証明されています。

リトルマーケットリサーチ1| 2022年のクイックグリンプス遠隔医療市場

リトルマーケットリサーチ1| 2022年のクイックグリンプス遠隔医療市場

遠隔医療は、パンデミック後の時代では新しいものではなく、時代遅れの分野でもありません。しかし、業界を詳しく見ると、需要と供給の強力な持続可能性と、米国で絶え間ない革命となる強力な潜在的成長曲線を示しています。

スタートアップ資金調達環境:タイのスタートアップエコシステムの次は何ですか?

スタートアップ資金調達環境:タイのスタートアップエコシステムの次は何ですか?

2021年は、世界的なベンチャーキャピタル(VC)の資金調達にとって記録的な年でした。DealStreetAsiaによると、東南アジアも例外ではなく、この地域では年間で記録的な25の新しいユニコーンが採掘されました。

ムーアの法則を超えて

ムーアの法則を超えて

計算に対する私たちの欲求とムーアの法則が提供できるものとの間には、指数関数的に増大するギャップがあります。私たちの文明は計算に基づいています—建築と想像力の現在の限界を超える技術を見つけなければなりません。

Language