CORSと同一生成元ポリシー反応バンドルアプリ

Question

のリクエスト問題まあ、webpackとcreate-react-appにバンドルされてアプリを展開しようとしているイム、ここでは理論は単純です：

イムいくつかの環境変数を使用しますが、中の一言で、http://theapp.app.com/api/v3/endpointのようなURLを使用しています。

のモードでは、URLはhttp://localhost/api/v3/endpointであり、ユニークな変更があります。

とにかく、私はfetch APIを使ってリクエストしていますが、私はフェッチ設定のmodeで遊んでいます。 developmentについては、サーバはローカルマシンにはないので、それはmode: 'cors'であり、完全に動作します。 productionフラグの場合

、iはmode: 'same-origin'とcorsと試みたが、私は、それぞれ順に、この2つのエラーを取得：

• 同一生成元は

• CORSを有効に生産に有効生産中

前にいくつかのaclarations：

1. はい、APIアプリとバンドルは、同じサーバ/マシンによって提供されています。はい、私は要求元のURLのsame-origin方針に等しくないことを知っているが、corsで

   @app.hook('after_request') def enable_cors(): response.headers['Access-Control-Allow-Origin'] = '*' response.headers['Access-Control-Allow-Headers'] = 'Origin, X-Requested-With, Content-Type, Accept' response.headers['Access-Control-Allow-Methods'] = 'GET, POST, OPTIONS'

2. ：

3. うん、私たちは、サーバー上で構成CORSを（私たちはPythonのボトルを使用している）持っていますそれも爆発的に有効になり、http://data.blablaは直接サーバーからのURLです....私はちょうど何をすべきか分かりません。

私（悲しいことに）には時間がありました。

Answer 1

サーバー側のlocalhostへのアクセスは、同じサーバーを指しているので問題ありません。しかし、クライアント側でこれを実行しようとすると、http://localhostは、と全く同じクライアントを指しています。ブラウザで動作しているJavascriptがhttp://localhostから何かを要求している場合は、Webアプリケーションのホストではなく、ブラウザのコンピュータと通信しようとしています。 あなたがそれを実現していないということは私には起こりませんでした。

APIがlocalhostにあると言ったとき、私はこのアプリケーションがすでにAPIサーバーを実行しているクライアントでのみ使用されると考えました。

外部のユーザーがこのアプリを使用することになっている場合は、APIも公開する必要があります。安全でないAPIを非表示にするには、エクスポーズされていて安全な中間APIを実装する必要があります。または、実際のAPIを確保してください：