Zaiyu CORS - クロスドメインのカスタムHTTPヘッダー結果

道標

まあ、クロスドメインのバックエンド構成が、HTTPヘッダー内のフロントエンドトークンの追加、およびクロスドメインの問題を発生させます
フラスコ、ヴュー（Axios）、クロスドメイン

該当シーン

前と後の分離の終わり、ログイン状態を管理するためにトークンを使用する場合、またはインタフェースをコールバック

環境

プラットフォームに依存しません

参考ブログ

ヘッダ情報にaxios構成トークンの後に、要求は、リアクロスドメインの問題に報告されます。しかし、時に郵便配達のテスト何の問題もなく。

実際には、この質問に対する答えは即時、でも変な答えを助けるために与えられていないがありますが、私のためにドアを開きます。

背景

様々な理由から、このソリューションワードプレスに似た既製のブログの使用を放棄し、ブログシステムを構築するためにあなた自身を準備し、技術の選択は次のとおりです。バックエンド：フラスコ、フロントエンド：ヴュー。トークンを使用して、クッキーを放棄する状態管理にログインします。CORSの問題は、特定の状況のVueの発達を保護するための経路であると思われた背景から得られるトークンヘッダHTTPリクエストに加え、ドメイン間の適切なインターフェースを呼び出し表示。

クロスドメインは、実際にクロスドメインソリューションを構成しflask_corsことにより、フラスコに登場している前に、そのクロスドメインの世代は、私は非常に困惑しつつある、との問題はかなり奇妙であるため、検索エンジンで良い解決策を見つけていません（彼はない、それらを見つけ、私が説明する方法がわからない場合もある）、それが自分のクロスドメインを再検討することができ、いくつかの新しい収穫があります。

分析

私は、クロスドメインの問題に実行されます開発の初期段階における現像剤の分離の前後端の使用を信じて、私はバックグラウンドを通じて解決することを選んだ、多くのクロスドメインのソリューションがあります。

クロスドメインブラウザの問題同一生成元ポリシーは、ここでは繰り返さない、多くのインターネット関連の記事を引き起こしました。なお：なしクロスドメインにpostmanません。

フラスコは、クロスドメインソリューションを解決するため、完了するために、次のコードは非常にシンプルです。

from flask_cors import CORS
CORS(app,supports_credentials=True

@app.after_request
def after_request(resp):
    resp = make_response(resp)
    resp.headers['Access-Control-Allow-Origin'] = 'http://127.0.0.1:8080'
    resp.headers['Access-Control-Allow-Methods'] = 'GET,POST'
    resp.headers['Access-Control-Allow-Headers'] = 'x-requested-with,content-type'
    return resp

一度設定され、それは行かなかったので、それは何の問題もなかったしていない、さらにそれが立ち往生した。このときまで、その設定の意味を理解し、私は何を私のクロスドメインの設定に何かを見つけるために持っていましたか？

実際には、この問題の重要なポイントは、3つの構成である：Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers。
彼らは最後に意味は何ですか？

まず第一にAccess-Control-Allow-Origin、文字通り、この構成は、対応するソースはほとんどここにあるオンライン書面で、バックエンドのリソースにアクセスすることができます*私はここにいるので、これは、安全ではない、すべてのソースを可能にする、Vueの、ローカルの開発段階です開始ポートは8080ですので、私はそれを書いたhttp://127.0.0.1:8080あなたの発展に応じて自分のニーズにトリプルに必要。

第二にAccess-Control-Allow-Methods、また文字通り、GET、HTTPメソッドの使用を可能にし、POSTは2つだけを書いたあなたは別の方法を使用する必要がある場合は、ここで書くこと、またはされる場所、最も一般的ですクロスドメインの問題。

以上の2つの構成が最後の部分では、問題と問題ありません。

Access-Control-Allow-Headers私たちは、HTTPリクエストのカスタムのフロントエンドにフィールドを追加するため、上記と2、文字通りの意味は、その理由は、問題彼女であるtokenが、これはライセンスの範囲内ではない（許可のみx-requested-withとcontent-type）のでありソースポリシーが契約不正な要求と一致していないので、我々は唯一のヘッダーをカスタマイズする必要があるかを決定するために、それに追加することができます。答えが出てきました。

ビットを掘るために続けて、このフィールドがあるの二つの意味は何ですか？x-requested-with、content-type。

x-requested-withAjaxによって開始されたクライアントの要求を決定するために使用され、そのためAxiosの関係は何ですか？答えは：それは問題ではない...それを直接削除することができます。このコードを貼り付けすると、デフォルトの人物やアヤックスを使用して開始要求、ない分析やフィールドの意味なので、それが直接コードに添付されていますが、Axiosを使用する開発者のために、このフィールドは避けられません。

content-type：データ形式を指定し、POSTリクエストをコードします。josnより最も一般的なデータフォーマットは、以下の形式：application/jsonPOST要求のHTTPヘッダの後端にプリントアウトは、これ以下のデータがあります。

Content-Type: application/json;charset=UTF-8

ソリューション

ではAccess-Control-Allow-Headers、次のようにヘッダー全体的にカスタム名を追加します。

from flask_cors import CORS
CORS(app,supports_credentials=True

@app.after_request
def after_request(resp):
    resp = make_response(resp)
    resp.headers['Access-Control-Allow-Origin'] = 'http://127.0.0.1:8080'
    resp.headers['Access-Control-Allow-Methods'] = 'GET,POST'
    resp.headers['Access-Control-Allow-Headers'] = 'content-type,token'
    return resp

実際には、削除直接Access-Control-Allow-Headersこの構成は問題を解決することができますが、すべての固定状況は確かに安全です列挙します。

####
よりHaytham元の記事については、公共の番号「Xujuロング」に注意を払ってください。
私のマイクロチャネル公共数