【SOP】Vue+Python(Flask)でCORSで詰まった話

はじめに

Vue(127.0.0.1:8080)+Flask(127.0.0.1:5000)で認証機能の実装をしているときにCORSで詰まったときの話。

何をしようとした

VueからAPIをたたき(login api的な)、Flask側で認証を行います。認証が成功したら、CookieにJWT形式のトークンをセットしレスポンスを返すという実装を行う際、セットしたCookieがブラウザ側でセットされず、次のAPIリクエスト時に正しく認可が行えない問題が発生しました。

JWTの生成にはflask_jwt_extendedを使っています。

結論

flaskのモジュール**「Flask-CORS」**を使います。

Flask-CORS

pip install -U flask-cors

app = Flask(__name__)
cors = CORS(app)

ただ、Cookieを扱う際は上記だけではだめで、以下の「supports_credentials=True」オプションを設定する必要があります。

app = Flask(__name__)
cors = CORS(app, supports_credentials=True)

Using CORS with cookie

また、クライアント側でもPOSTなどのリクエスト時に**「withCredentials」**をtrueで設定してあげる必要があります。
（以下のソース文法ミスあるかもです）

<script>

import Axios from 'axios'

module.exports = new Vue({
  data: {
  },
  methods: {
    test(){
     axios.post('http://127.0.0.1:5000/api/v1/protected', {}, {withCredentials : true})
      .then(response => {
        console.log(response);
      })
   }
  }
});

</script>

最後に

同じようなところで詰まっている方の助けになれば幸いです。
CORSやCookieはセキュリティに大きく関わってくるところですので、正しく意味を理解して実装する必要がありますね。
お勉強頑張ります。。。

P.S.

flask_jwt_extendedやflask-login便利なのに日本語の記事が少なくないですか？
需要がありそうなら自分で記事書こうかな。